div内の罫線をカスタマイズする方法

Question

罫線を下に傾けるにはどうしたらいいですか？

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

Answer 1

clip-path（チェックMDN）を使用できます。

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

Answer 2

あなたは、六角形の形状に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/