如何制作带有延长的尖角边框

huangapple
go评论127阅读模式
英文:

How to make border with elongated sharp corners

问题

如何在CSS中创建这种类型的边框？

我尝试使用border-radius和(-)符号，但它不起作用。请帮助我。

我还尝试使用:after和:before属性，但它们也不起作用。

如果您有任何想法，请帮助我解决这个问题。

英文:

如何制作带有延长的尖角边框

How to make that type of border in CSS?

I have try border-radius with (-) sign but it didn't work. Please help me.

Also İ tried to use :after :before properties but its also didn't work.

If you have any idea please help me solve this problem.

答案1

得分: 0

以下是代码部分的翻译：

  1. .box {
  2.   --b: 4px;  /* 边框厚度 */ 
  3.   --c: red;  /* 边框颜色 */
  4.   --r: 30px; /* 半径 */
  6.   margin: 40px;
  7.   display: inline-block;
  8.   font-size: 40px; 
  9.   padding: 20px;
  10.   border: var(--b) solid var(--c);
  11.   background: #fff;
  12.   border-radius: var(--r) 0 var(--r) var(--r);
  13.   position: relative;
  14.   clip-path: inset(-100px 0);
  15. }
  16. .box:before {
  17.   content: "";
  18.   position: absolute;
  19.   left: var(--r);
  20.   right: calc(-1*var(--b));
  21.   bottom: 100%;
  22.   height: var(--r);
  23.   border-right: var(--b) solid var(--c);
  24.   border-bottom: var(--b) solid var(--c);
  25.   border-bottom-right-radius: var(--r);
  26.   box-shadow: var(--r) var(--b) 0 #fff;
  27. }
  28. .box:after {
  29.   content: "";
  30.   position: absolute;
  31.   right: calc(-1*var(--b));
  32.   bottom: calc(100% - var(--b));
  33.   width: var(--b);
  34.   height: var(--r);
  35.   background: var(--c);
  36. }
  38. body {
  39.   background: #eee
  40. }

希望这对你有帮助。如果你需要更多翻译，请随时告诉我。

英文:

Here is an idea using pseudo-elements. I considered CSS variables so you can easily adjust the shape without touching the code.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .box {
  2.   --b: 4px;  /* border thickness */ 
  3.   --c: red;  /* border color */
  4.   --r: 30px; /* radius */
  6.   margin: 40px;
  7.   display: inline-block;
  8.   font-size: 40px; 
  9.   padding: 20px;
  10.   border: var(--b) solid var(--c);
  11.   background: #fff;
  12.   border-radius: var(--r) 0 var(--r) var(--r);
  13.   position: relative;
  14.   clip-path: inset(-100px 0);
  15. }
  16. .box:before {
  17.   content:&quot;&quot;;
  18.   position: absolute;
  19.   left: var(--r);
  20.   right: calc(-1*var(--b));
  21.   bottom: 100%;
  22.   height: var(--r);
  23.   border-right: var(--b) solid var(--c);
  24.   border-bottom: var(--b) solid var(--c);
  25.   border-bottom-right-radius: var(--r);
  26.   box-shadow: var(--r) var(--b) 0 #fff;
  27. }
  28. .box:after {
  29.   content:&quot;&quot;;
  30.   position: absolute;
  31.   right: calc(-1*var(--b));
  32.   bottom: calc(100% - var(--b));
  33.   width: var(--b);
  34.   height: var(--r);
  35.   background: var(--c);
  36. }
  38. body {
  39.   background: #eee
  40. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;box&quot;&gt;
  2.   some text&lt;br&gt;
  3.   content
  4. &lt;/div&gt;

<!-- end snippet -->

答案2

得分: 0

  1. <!-- 开始代码片段: js 隐藏: true 控制台: false Babel: false -->
  3. <!-- 语言: lang-css -->
  4. body {
  5.   display:flex;
  6.   height:100vh;
  7.   align-items:center;
  8.   justify-content: center;
  9.   background-color: #e7d39f;
  10. }
  12. div {
  13.   position:relative;
  14.   width: 200px;
  15.   height: 80px;
  16.   background: #522d5b;
  17.   border-radius:25px;
  18.   border-top-left-radius:0;
  19. }
  21. div:before {
  22.   content: "";
  23.   position:absolute;
  24.   top:-40px;
  25.   left:0;
  26.   height:40px;
  27.   width: 40px;
  28.   border-bottom-left-radius: 60%;
  29.   box-shadow: 0 22px 0 0 #522d5b;
  30. }
  32. <!-- 语言: lang-html -->
  33. <!DOCTYPE html>
  34. <html>
  35. <head></head>
  36. <body>
  38. <div></div>
  40. </body>
  41. </html>
  43. <!-- 结束代码片段 -->

Play with CSS raduises & box-shadow and see what happens! ; )

英文:

<!-- begin snippet: js hide: true console: false babel: false -->

<!-- language: lang-css -->

  1. body {
  2.   display:flex;
  3.   height:100vh;
  4.   align-items:center;
  5.   justify-content: center;
  6.   background-color: #e7d39f;
  7. }
  9. div {
  10.   position:relative;
  11.   width: 200px;
  12.   height: 80px;
  13.   background: #522d5b;
  14.   border-radius:25px;
  15.   border-top-left-radius:0;
  16. }
  18. div:before {
  19.   content: &quot;&quot;;
  20.   position:absolute;
  21.   top:-40px;
  22.   left:0;
  23.   height:40px;
  24.   width: 40px;
  25.   border-bottom-left-radius: 60%;
  26.   box-shadow: 0 22px 0 0 #522d5b;
  27. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;&lt;/head&gt;
  4. &lt;body&gt;
  6. &lt;div&gt;&lt;/div&gt;
  8. &lt;/body&gt;
  9. &lt;/html&gt;

<!-- end snippet -->

Play with CSS raduises & box-shadow and see what happens! ; )

答案3

得分: 0

使用CSS clip-path的示例。

通过将相同的clip-path添加到稍大的包装元素来模拟边框。

灵感来源：https://stackoverflow.com/questions/31854185/how-to-add-border-in-my-clip-path-polygon-css-style

有关SVG路径的良好解释：https://stackoverflow.com/questions/10177985/svg-rounded-corner

  1. .bubble {
  2.   background: #1997d6;
  3.   height: 150px;
  4.   width: 220px;
  5.   position: relative;
  6.   clip-path: path('M0,8 h180 a40,20 0 0 0 40,-10 v110 a40,40 0 0 1 -40,40 h-135 a40,40 0 0 1 -40,-40 v-60 a40,40 0 0 1 40,-40 z');
  7. }
  9. .bubble>div {
  10.   padding: 12px;
  11.   box-sizing: border-box;
  12.   position: absolute;
  13.   height: 100%;
  14.   width: 100%;
  15.   transform: scale(0.96);
  16.   color: #1997d6;
  17.   background: white;
  18.   clip-path: path('M0,8 h180 a40,20 0 0 0 40,-10 v110 a40,40 0 0 1 -40,40 h-135 a40,40 0 0 1 -40,-40 v-60 a40,40 0 0 1 40,-40 z');
  19. }
  1. <div className="bubble">
  2.   <div>
  4.   </div>
  5. </div>
英文:

Example using CSS clip-path.

It mimics a border by adding the same clip-path to a slightly larger wrapping element.

Inspiration: https://stackoverflow.com/questions/31854185/how-to-add-border-in-my-clip-path-polygon-css-style

Good explanation on SVG paths: https://stackoverflow.com/questions/10177985/svg-rounded-corner

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-css -->

  1. .bubble {
  2.   background: #1997d6;
  3.   height: 150px;
  4.   width: 220px;
  5.   position: relative;
  6.   clip-path: path(&#39;M0,8 h180 a40,20 0 0 0 40,-10 v110 a40,40 0 0 1 -40,40 h-135 a40,40 0 0 1 -40,-40 v-60 a40,40 0 0 1 40,-40 z&#39;);
  7. }
  9. .bubble&gt;div {
  10.   padding: 12px;
  11.   box-sizing: border-box;
  12.   position: absolute;
  13.   height: 100%;
  14.   width: 100%;
  15.   transform: scale(0.96);
  16.   color: #1997d6;
  17.   background: white;
  18.   clip-path: path(&#39;M0,8 h180 a40,20 0 0 0 40,-10 v110 a40,40 0 0 1 -40,40 h-135 a40,40 0 0 1 -40,-40 v-60 a40,40 0 0 1 40,-40 z&#39;);
  19. }

<!-- language: lang-html -->

  1. &lt;div className=&quot;bubble&quot;&gt;
  2.   &lt;div&gt;
  4.   &lt;/div&gt;
  5. &lt;/div&gt;

<!-- end snippet -->

答案4

得分: 0

  1. <div class="对话框">
  2.   一些文本在这里告诉你关于生活的真相。
  3. </div>
  5. <div class="对话框 对话框--轮廓">
  6.   一些其他文本，展示生活有边界的时候。
  7. </div>
  1. body {
  2.   颜色: #3e3e3e;
  3.   边距: 4rem;
  4.   背景: #f4c1f3;
  5. }
  7. .对话框 {
  8.   层级: 10;
  9.   边距: 2rem;
  10.   背景: #4fc1f3;
  11.   填充: 1rem;
  12.   边框半径: 1rem 0 1rem 1rem;
  13.   显示: 行内块;
  14.   位置: 相对;
  15. }
  16. .对话框:after, .对话框:before {
  17.   层级: 0;
  18.   内容: "";
  19.   位置: 绝对;
  20.   顶部: 0;
  21.   变换: 平移Y(-100%);
  22.   宽度: 1rem;
  23.   高度: 1rem;
  24. }
  25. .对话框:before {
  26.   背景: 继承;
  27.   右侧: 0;
  28. }
  29. .对话框:after {
  30.   背景: #f4c1f3;
  31.   右侧: 0;
  32.   边框半径: 0 0 1rem 0;
  33. }
  34. .对话框--轮廓 {
  35.   层级: 100;
  36.   背景: #fff;
  37.   边框: 1px 实线 #4fc1f3;
  38. }
  39. .对话框--轮廓:before, .对话框--轮廓:after {
  40.   右侧: -1px;
  41.   边框: 1px 实线 透明;
  42.   右边框颜色: #4fc1f3;
  43. }
  44. .对话框--轮廓:before {
  45.   底边框样式: 无;
  46. }
  47. .对话框--轮廓:after {
  48.   底边框颜色: #4fc1f3;
  49. }

在 CodePen 上查看实时代码

  2. <details>
  3. <summary>英文:</summary>
  5. ```HTML
  6. &lt;div class=&quot;dialog&quot;&gt;
  7.   Some text here to tell you the truth about life.
  8. &lt;/div&gt;
  10. &lt;div class=&quot;dialog dialog--outline&quot;&gt;
  11.   Some other text to show you life when it has borders.
  12. &lt;/div&gt;
  1. body {
  2.   color: #3e3e3e;
  3.   margin: 4rem;
  4.   background: #f4c1f3;
  5. }
  7. .dialog {
  8.   z-index: 10;
  9.   margin: 2rem;
  10.   background: #4fc1f3;
  11.   padding: 1rem;
  12.   border-radius: 1rem 0 1rem 1rem;
  13.   display: inline-block;
  14.   position: relative;
  15. }
  16. .dialog:after, .dialog:before {
  17.   z-index: 0;
  18.   content: &quot;&quot;;
  19.   position: absolute;
  20.   top: 0;
  21.   transform: translateY(-100%);
  22.   width: 1rem;
  23.   height: 1rem;
  24. }
  25. .dialog:before {
  26.   background: inherit;
  27.   right: 0;
  28. }
  29. .dialog:after {
  30.   background: #f4c1f3;
  31.   right: 0;
  32.   border-radius: 0 0 1rem 0;
  33. }
  34. .dialog--outline {
  35.   z-index: 100;
  36.   background: #fff;
  37.   border: 1px solid #4fc1f3;
  38. }
  39. .dialog--outline:before, .dialog--outline:after {
  40.   right: -1px;
  41.   border: 1px solid transparent;
  42.   border-right-color: #4fc1f3;
  43. }
  44. .dialog--outline:before {
  45.   border-bottom-style: none;
  46. }
  47. .dialog--outline:after {
  48.   border-bottom-color: #4fc1f3;
  49. }

Check the live code on pen

答案5

得分: -1

你可以通过直接在特定元素上使用clip-path来实现，或者添加一个:before、:after或子元素作为装饰元素来处理右上角。

英文:

You can do that either by using clip-path directly on that specific element or adding a :before or :after or a child element as a decoration element to deal with the right corner.

huangapple
  • 本文由 发表于 2023年7月13日 16:50:03
  • 转载请务必保留本文链接：https://go.coder-hub.com/76677537.html
  • css
  • css-selectors
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定