CODEWITHSUNDEEP
htmlcssborder
DragonKnight
DragonKnight

Reputation: 1880

How to customize borders in a div

How can I make side borders lean like bellow? 

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

Upvotes: 0

Views: 93

Answers (2)

Merkelst
Merkelst

Reputation: 311

You can use clip-path (check MDN).

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

Upvotes: 1

Evelina
Evelina

Reputation: 105

You can create a div in the shape of a hexagon

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

source: http://csshexagon.com/

Upvotes: 3

Related Questions