斜边或扭曲的边框形状 [英] Oblique or twisted border shape

问题描述

如果可以使用CSS创建封装（或者更好的说扭曲）边框，我感兴趣。效果我想实现是在图片。

>

解决方案

最简单和整洁的解决方案是使用 svg 创建边框。 p>

>

  #container {position：relative; width：200px; height：30px;}＃content {text-transform：uppercase; position：absolute; width：200px; height：30px; top：0; text-align：center; line-height：30px;}  

 < div id = container> < svg width =200height =30viewBox = -  1 -2 201 33> < path d =M0,0 h200 l-15,15 l15,15 h-200 l15，-15zstroke =blackstroke-width =2fill =none/> < / svg> < div id =content> lorem ipsum< / div>< / div>  

b

---

您甚至可以使用二次曲线来绘制一些曲线。

  #container {position：relative; width：200px; height：30px; margin-bottom：30px;}＃content {text-transform：uppercase; position：absolute; width：200px; height：30px; top：0; text-align：center; line-height：30px;}  

 < div id = container> < svg width =200height =30viewBox = -  1 -1 201 33> < path d =M0,0 h200 q-20,15 0,30 h-200 q20，-15 0，-30stroke =blackstroke-linejoin =roundstroke-width =2fill =none/> < / svg> < div id =content> lorem ipsum< / div>< / div>< div id =container> < svg width =200height =30viewBox = -  1 -1 201 33> < path d =M0,0 h200 q0,10 -15,15 q10,0 15,15 h-200 q0，-10 15，-15 q-10,0 -15，-15stroke =black stroke-linejoin =roundstroke-width =2fill =none/> < / svg> < div id =content> lorem ipsum< / div>< / div>< div id =container> < svg width =200height =30viewBox = -  1 -1 201 33> < path d =M0,0 h200 q-10,0 -15,12.5 l15,2.5 l-15,2.5 q0,10 15,13 h-200 q10,0 15，-12.5 l-15，-2.5 l15 ，-2.5q0，-10 -15，-12.5stroke =blackstroke-linejoin =roundstroke-width =2fill =none/> < / svg> < div id =content> lorem ipsum< / div>< / div>  

b

---

您可以轻松添加阴影效果。

  #container {position：relative; width：200px; height：30px; margin-bottom：30px;}＃content {text-transform：uppercase; position：absolute; width：200px; height：30px; top：0; text-align：center; line-height：30px;}  

 < div id = container> < svg width =205height =35viewBox = -  1 -1 205 38> < filter id =f>  

b


---

或者，您可以随时使用：之后和：伪元素。

width 和 code>：和：before 之前的：伪元素使用一些基本的三角学计算。 / p>



>

对侧是 width 和 height 和：before ：伪元素之前的：/ code>左边的一个给出了顶部和右边界，右边的一个给出了顶部和左边界。然后，左边的旋转 45deg ，右边的旋转 -45deg 。

  div {position：relative; text-transform：uppercase; width：200px; height：30px; text-align：center; line-height：27px; border-top：3px solid black; border-bottom：3px solid black; box-sizing：border-box;} div：after，div：before {position：absolute; content：''; width：21.21px; height：21.21px; border-top：3px solid black; border-right：3px solid black; transform：rotate（45deg）; box-sizing：border-box; top：1px; left：-9px;} div：after {border-right：0; border-left：3px solid black;左：100％; margin-left：-10px; transform：rotate（-45deg）;}  

 < div> ; lorem ipsum< / div>  

I'm interested if it's possible to create wrapped (or maybe better said twisted) border using CSS. Effect I wanted to achieve is in the picture.

解决方案

Most easiest and neat solution would be to use svg to create the border.

#container {
  position: relative;
  width: 200px;
  height: 30px;
}
#content {
  text-transform: uppercase;
  position: absolute;
  width: 200px;
  height: 30px;
  top: 0;
  text-align: center;
  line-height: 30px;
}

<div id="container">
  <svg width="200" height="30" viewBox="-1 -2 201 33">
    <path d="M0,0 h200 l-15,15 l15,15 h-200 l15,-15z" stroke="black" stroke-width="2" fill="none" />
  </svg>
  <div id="content">lorem ipsum</div>
</div>

---

You could even spice it up with some curves using quadratic curves.

#container {
  position: relative;
  width: 200px;
  height: 30px;
  margin-bottom: 30px;
}
#content {
  text-transform: uppercase;
  position: absolute;
  width: 200px;
  height: 30px;
  top: 0;
  text-align: center;
  line-height: 30px;
}

<div id="container">
  <svg width="200" height="30" viewBox="-1 -1 201 33">
    <path d="M0,0 h200 q-20,15 0,30 h-200 q20,-15 0,-30" stroke="black" stroke-linejoin="round" stroke-width="2" fill="none" />
  </svg>
  <div id="content">lorem ipsum</div>
</div>

<div id="container">
  <svg width="200" height="30" viewBox="-1 -1 201 33">
    <path d="M0,0 h200 q0,10 -15,15 q10,0 15,15 h-200 q0,-10 15,-15 q-10,0 -15,-15" stroke="black" stroke-linejoin="round" stroke-width="2" fill="none" />
  </svg>
  <div id="content">lorem ipsum</div>
</div>

<div id="container">
  <svg width="200" height="30" viewBox="-1 -1 201 33">
    <path d="M0,0 h200 q-10,0 -15,12.5 l15,2.5 l-15,2.5 q0,10 15,13 h-200 q10,0 15,-12.5 l-15,-2.5 l15,-2.5 q0,-10 -15,-12.5" stroke="black" stroke-linejoin="round" stroke-width="2" fill="none" />
  </svg>
  <div id="content">lorem ipsum</div>
</div>

---

You could easily add a drop shadow effect.

#container {
  position: relative;
  width: 200px;
  height: 30px;
  margin-bottom: 30px;
}
#content {
  text-transform: uppercase;
  position: absolute;
  width: 200px;
  height: 30px;
  top: 0;
  text-align: center;
  line-height: 30px;
}

<div id="container">
  <svg width="205" height="35" viewBox="-1 -1 205 38">
    <filter id="f">
      <feGaussianBlur stdDeviation="1.5" />
    </filter>
    <path filter="url(#f)" d="M0,0 h200 l-15,15 l15,15 h-200 l15,-15z" stroke="black" stroke-linejoin="round" stroke-width="2" transform="translate(0,3)" fill="black" />
    <path id="shape" d="M0,0 h200 l-15,15 l15,15 h-200 l15,-15z" stroke="black" stroke-linejoin="round" stroke-width="2" fill="white" />
  </svg>
  <div id="content">lorem ipsum</div>
</div>

<div id="container">
  <svg width="205" height="35" viewBox="-1 -1 205 38">
    <path filter="url(#f)" d="M0,0 h200 q0,10 -15,15 q10,0 15,15 h-200 q0,-10 15,-15 q-10,0 -15,-15" stroke="black" stroke-linejoin="round" stroke-width="2" transform="translate(0,3)" fill="black" />
    <path d="M0,0 h200 q0,10 -15,15 q10,0 15,15 h-200 q0,-10 15,-15 q-10,0 -15,-15" stroke="black" stroke-linejoin="round" stroke-width="2" fill="white" />
  </svg>
  <div id="content">lorem ipsum</div>
</div>

<div id="container">
  <svg width="205" height="35" viewBox="-1 -1 205 38">
    <path filter="url(#f)" d="M0,0 h200 q-10,0 -15,12.5 l15,2.5 l-15,2.5 q0,10 15,13 h-200 q10,0 15,-12.5 l-15,-2.5 l15,-2.5 q0,-10 -15,-12.5" stroke="black" stroke-linejoin="round" stroke-width="2" transform="translate(0,3)" fill="black" />
    <path d="M0,0 h200 q-10,0 -15,12.5 l15,2.5 l-15,2.5 q0,10 15,13 h-200 q10,0 15,-12.5 l-15,-2.5 l15,-2.5 q0,-10 -15,-12.5" stroke="black" stroke-linejoin="round" stroke-width="2" fill="white" />
  </svg>
  <div id="content">lorem ipsum</div>
</div>

---

Alternatively you could always use :after and :before :pseudo-elements.

The width and height of the :after and :before :pseudo-elements were calculated using some basic trigonometry.

The opposite side is the width and height of the :after and :before :pseudo-elements. The one on the left is given top and right borders and the one on the right is given top and left borders. Then, the one on the left has been rotated 45deg and the one on the right has been rotated -45deg.

div {
  position: relative;
  text-transform: uppercase;
  width: 200px;
  height: 30px;
  text-align: center;
  line-height: 27px;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  box-sizing: border-box;
}
div:after,
div:before {
  position: absolute;
  content: '';
  width: 21.21px;
  height: 21.21px;
  border-top: 3px solid black;
  border-right: 3px solid black;
  transform: rotate(45deg);
  box-sizing: border-box;
  top: 1px;
  left: -9px;
}
div:after {
  border-right: 0;
  border-left: 3px solid black;
  left: 100%;
  margin-left: -10px;
  transform: rotate(-45deg);
}

<div>lorem ipsum</div>

这篇关于斜边或扭曲的边框形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！