html - 如何在div中自定义边框

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/