使六角形形状与边框，圆角和透明背景 [英] Make hexagon shape with border, rounded corners and transparent background

问题描述

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

。

  svg {height：200px; width：240px;} path {stroke：＃777; fill：none;} body {background：black;}  

  < svg viewBox ='0 0 120 100'> < path d ='M38,2 L82,2 A12,12 0 0,1 94,10 L112,44 A12,12 0 0,1 112,56 L94,90 A12,12 0 0,1 82,98 L38， 98 A12,12 0 0,1 26,90 L8,56 A12,12 0 0,1 8,44 L26,10 A12,12 0 0,1 38,2'/>< / svg>  
 

如果你还想使用CSS，你可以按照 jbutler483 在这个小提琴他的。 （ ）

  .roundHex {位置：相对; margin：0 auto;背景：透明; border-radius：10px; height：300px; width：180px; box-sizing：border-box; transition：all 1s; border：10px solid transparent; border-top-color：black; border-bottom-color：black;}。roundHex：before，.roundHex：after {content：; border：inherit; position：absolute; top：-10px; left：-10px;背景：inherit; border-radius：inherit;高度：100％; width：100％;}。roundHex：before {transform：rotate（60deg）;} roundHex：after {transform：rotate（-60deg）;}  

 < div class =roundHex>< / div>  

I want to make a hexagonal shape with border, rounded corners and transparent background in CSS3 like in this image:

I can't make this with rounded corners and border.

My code is here:

#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);  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: rotate(-60deg);  /* IE 9 */
  transform: rotate(-60deg); /* Firefox 16+, IE 10+, Opera */
}

<div id="hexagon-circle"></div>

解决方案

Hexagon with rounded corners are complex shapes to create and I usually recommend using SVG for creating them. The need for a transparent background makes it even more better suited for SVG. With SVG you can get better control over the shape, its curves etc and you don't have to add a lot of extra (unnecessary) elements to your markup also.

All that is needed for creating this shape with SVG is to use a single path element along with a few L (line) and A (arc) commands. The L (line) command basically draws a line from point 1 to point 2 whereas the A (arc) command draws an arc of the specified radius (the first two values immediately following the A command).

You can read more about the SVG path element and its commands in this MDN tutorial.

svg {
  height: 200px;
  width: 240px;
}
path {
  stroke: #777;
  fill: none;
}

body {
  background: black;
}

<svg viewBox='0 0 120 100'>
  <path d='M38,2 
           L82,2 
           A12,12 0 0,1 94,10 
           L112,44 
           A12,12 0 0,1 112,56
           L94,90       
           A12,12 0 0,1 82,98
           L38,98
           A12,12 0 0,1 26,90
           L8,56
           A12,12 0 0,1 8,44
           L26,10
           A12,12 0 0,1 38,2' />
</svg>

If you still want to use CSS, you could follow the approach used by jbutler483 in this fiddle of his. (I have appended the code from that fiddle also into this answer to avoid link rot problems)

.roundHex {
  position: relative;
  margin: 0 auto;
  background: transparent;
  border-radius: 10px;
  height: 300px;
  width: 180px;
  box-sizing: border-box;
  transition: all 1s;
  border: 10px solid transparent;
  border-top-color: black;
  border-bottom-color: black;
}
.roundHex:before,
.roundHex:after {
  content: "";
  border: inherit;
  position: absolute;
  top: -10px;
  left: -10px;
  background: inherit;
  border-radius: inherit;
  height: 100%;
  width: 100%;
}
.roundHex:before {
  transform: rotate(60deg);
}
.roundHex:after {
  transform: rotate(-60deg);
}

<div class="roundHex"></div>

这篇关于使六角形形状与边框，圆角和透明背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！