小编mil*_*dhp的帖子

制作带有边框,圆角和透明背景的六边形

我想在CSS3中制作一个带有边框,圆角和透明背景的六边形,如下图所示:

我不能用圆角和边框做这个.

我的代码在这里:

#hexagon-circle {
  position: relative;
  margin: 1em auto;
  width: 10em;
  height: 17.32em;
  border-radius: 1em/.5em;
  background: red;
  transition: opacity .5s;
  cursor: pointer;
}
#hexagon-circle:before {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
  -webkit-transform: rotate(60deg);  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: rotate(60deg);  /* IE 9 */
  transform: rotate(60deg); /* Firefox 16+, IE 10+, Opera */
}

#hexagon-circle:after {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
  -webkit-transform: rotate(-60deg);  /* …

Run Code Online (Sandbox Code Playgroud)

css svg css3 css-shapes

mil*_*dhp

2016 04-29

0
推荐指数

1
解决办法

5758
查看次数