上一篇: 什么是RESTful Web服务下一篇:Polymer 1.0 – 如何绑定html值

html – 如何使用CSS制作弯曲的边缘六边形

HTML 发布时间：2022-04-14 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了html – 如何使用CSS制作弯曲的边缘六边形，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

这是我的CSs.

CSS

#hexagon-circle { 
    width: 100px; 
    height: 55px; 
    BACkground: red; 
    position: relative;
    border-radius: 10px;} 
#hexagon-circle:before { 
    content: ""; 
    position: absolute; 
    top: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 29px solid red;
    border-radius: 10px;} 
#hexagon-circle:after { 
    content: ""; 
    position: absolute; 
    bottom: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 29px solid red;
    border-radius: 10px;}

输出是六边形的4个边缘弯曲,但顶部和底部不是.我想让六边形的所有边缘弯曲.如何使顶部和底部边缘弯曲？或如何使三角形的顶边弯曲？

http://jsfiddle.net/yR7zt/1

解决方法

我想你正在寻找这个.

CSS

.hex {
  position: relative;
  margin: 1em auto;
  width: 10em; height: 17.32em;
  border-radius: 1em/.5em;
  BACkground: orange;
  transition: opacity .5s;
}
.hex:before,.hex:after {
  position: absolute;
  width: inherit; height: inherit;
  border-radius: inherit;
  BACkground: inherit;
  content: '';
}
.hex:before {
   -webkit-transform: rotate(60deg);
   -ms-transform: rotate(60deg);/*Added for IE9*/
   transform: rotate(60deg);
}
.hex:after {
  -webkit-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);/*Added for IE9*/
  transform: rotate(-60deg);
}