斜边或扭曲的边框形状

Question

我很感兴趣，如果可以使用CSS创建包裹（或者可能更好的扭曲）边框。我希望实现的效果如图所示。

Answer 1

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

#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>

---

你甚至可以用一些曲线使用二次曲线来调整它。

#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>

---

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

#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>

---

或者，您可以始终使用:after和:before：伪元素。

使用一些基本的三角函数计算width和height：伪元素的:after和:before。

opposite side是width和height：伪元素的:after和:before。左边的那个给出顶部和右边框，右边的边框给出顶部和左边框。然后，左侧的那个已经旋转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;
  left: 100%;
  margin-left: -10px;
  transform: rotate(-45deg);
}

<div>lorem ipsum</div>

Answer 2

是的，你可以通过操纵:before和:after psuedo元素来完成纯粹用CSS 。

主要优势在于您可以保持HTML＆＃39;原样，并且在内容（html）和样式（CSS）之间保持严格的关注。

＆＃13;

＆＃13;

body {
  text-align: center;
}
div {
  border: 2px solid;
  display: inline-block;
  position: relative;
  padding: 0 40px;
  margin: 20px;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  border-right: 0;
  border-left: 0;
}
div:after,
div:before {
  border: 2px solid;
  height: 30px;
  width: 30px;
  content: '';
  display: block;
  position: absolute;
  top: -2px;
  transform: rotate(45deg);
}
div:after {
  right: -23px;
}
div:before {
  left: -23px;
}

＆＃13;

<div>Lorem Ipsum</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这是一种不同的方法，仅使用纯CSS来实现这种效果（使用this回答中解释但反向旋转元素的方法）。

基本上它涉及两个伪元素，它们以一点透视旋转并且一个位于另一个之下以实现形状。

这种方法的工作原理如下：

1. 两个伪元素:before和:after，大约是主.button元素大小的一半（包括边框）。每个伪元素的高度在一侧（顶部/底部）为35.5px + 3px边界，在另一侧为1.5px（因为两者在一半距离处重叠）。
2. 使用:before元素实现形状的上半部分，而使用:after元素实现下半部分。
3. 使用带有透视的rotateX来实现倾斜效果和定位以放置两个元素，使它们形成预期的形状。

  

注意：样本hover效果有一些额外的样式，导致形状变成细长的六边形。这不是问题的一部分，只是为了样本而添加（并且有点乐趣:)）。此外，较旧版本的Chrome和Safari似乎为hover行为提供了错误的输出，而所有浏览器的最新版本都运行良好。



＆＃13;
＆＃13;
/* General Button Style */

.button {
  position: relative;
  width: 300px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  text-transform: uppercase;
  color: #000;
  margin: 40px auto;
  box-sizing: border-box;
}
.button:before,
.button:after {
  width: 300px;
  left: 0px;
  height: 35.5px;
  z-index: -1;
  border: 4px solid #000;
  border-top-width: 3px;
  border-bottom-width: 3px;
}
.button:before {
  border-bottom: none;
}
.button:after {
  border-top: none;
}
.button:before {
  position: absolute;
  content: '';
  -webkit-transform: perspective(15px) rotateX(-3deg);
  -moz-transform: perspective(15px) rotateX(-3deg);
  transform: perspective(15px) rotateX(-3deg);
}
.button:after {
  position: absolute;
  top: 35.5px;
  content: '';
  -webkit-transform: perspective(15px) rotateX(3deg);
  -moz-transform: perspective(15px) rotateX(3deg);
  transform: perspective(15px) rotateX(3deg);
}
/* Hover Styles */

.button:hover:before,
.button:hover:after {
  background: #000;
}
.button:hover:before {
  top: -3px;
  -webkit-transform: perspective(15px) rotateX(3deg);
  -moz-transform: perspective(15px) rotateX(3deg);
  transform: perspective(15px) rotateX(3deg);
}
.button:hover:after {
  top: 38px;
  -webkit-transform: perspective(15px) rotateX(-3deg);
  -moz-transform: perspective(15px) rotateX(-3deg);
  transform: perspective(15px) rotateX(-3deg);
}
.button:hover {
  color: #fff;
}
＆＃13;
<div class="button">Lorem Ipsum</div>
＆＃13;
＆＃13;
＆＃13;

按原样，这会在IE 8和IE 9中很好地降级为带边框的方形按钮。但是，由于border（border-bottom :before和border-top :after）无效，因此会留下一个白色区域（类似于删除线）线）在中间。这可以通过添加几个IE＆lt;使用条件注释的10种特定样式，如本演示中所示。

<!--[if IE]>
    <style>
        .button:after{
            top: 38px;
        }
        .button:hover:before, .button:hover:after {
            border-bottom: 4px solid black;
        }
    </style>
<![endif]-->

输出IE 9和IE 8的屏幕截图（正常和悬停期间）