Question

如何让侧边框像波纹一样倾斜？

  /---------------------\
 /                       \
/                         \
\  vertically center text /
 \                       /
  \---------------------/

Answer 1

你可以创建一个六边形的div

<强> HTML

<div class="hexagon"></div>

<强> CSS

.hexagon {
position: relative;
width: 300px; 
height: 173.21px;
background-color: #64C7CC;
margin: 86.60px 0;
border-left: solid 5px #333333;
border-right: solid 5px #333333;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
z-index: 1;
width: 212.13px;
height: 212.13px;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background-color: inherit;
left: 38.9340px;
}

.hexagon:before {
 top: -106.0660px;
 border-top: solid 7.0711px #333333;
 border-right: solid 7.0711px #333333;
 }

.hexagon:after {
  bottom: -106.0660px;
  border-bottom: solid 7.0711px #333333;
  border-left: solid 7.0711px #333333;
}

来源：http://csshexagon.com/

Answer 2

您可以使用clip-path（查看MDN）。

示例：clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

如何自定义div

2 个答案: