کمک برای ساخت 6 ضلعی در css

[ahmadsoft 2]

با عرض سلام 

من میخوام این منوهای سایت http://wordpress.metrika.itembridge.com/2/ رو به جای مستطیل که الان هست به 6 ضلعی تبدیل کنم

ممنون میشم راهنماییم کنید 

[Saeed Fard 4740]

به این صورت می‌تونید در css شش ضلعی ایجاد کنید
 

<div class="test"></div>

.test {
  position: relative;
  width: 300px; 
  height: 173.21px;
  background-color: #64C7CC;
  margin: 86.60px 0;
}

.test:before,
.test:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
}

.test:before {
  bottom: 100%;
  border-bottom: 86.60px solid #64C7CC;
}

.test:after {
  top: 100%;
  width: 0;
  border-top: 86.60px solid #64C7CC;
}

 

و بعد div ایجاد شده رو جایگزین مربع‌های حال حاضر کنید

موفق باشید