So passen Sie Rahmen in einem div an

Question

Wie kann ich Seitenränder wie unten lehnen?

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

Answer 1

Sie können clip-path verwenden (MDN überprüfen). Beispiel: clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

Answer 2

Sie können ein div in der Form eines Sechsecks schaffen

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; 
} 

Quelle: http://csshexagon.com/