БЛОГ НА HUSL


Как сделать шестиугольник с закругленными краями с помощью CSS

Автор вопроса: Alexandr_TT

Это мой 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

Свободный перевод вопроса How to make a curved edge hexagon by using CSS от участника @sooko1005.


Источник

Ответы (3 шт):

Автор решения: Alexandr_TT

Я рассмотрю тот же трюк, который использовал в предыдущем ответе.
Я буду делать шестиугольник с помощью clip-path.

.hex {
  width: 200px;
  display: inline-block;
  color:orange;
}

.hex::before {
  content: "";
  display: block;
  background:currentColor;
  padding-top: 90%;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
<div class="hex"></div>

Затем я применю фильтр SVG:

введите сюда описание изображения

.hex {
  width: 200px;
  display: inline-block;
  color:orange;
  filter: url('#goo');
}

.hex::before {
  content: "";
  display: block;
  background:currentColor;
  padding-top: 86.6%; /* 100%*cos(30) */
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
<div class="hex"></div>
<div class="hex" style="color:blue;width:150px;"></div>
<div class="hex" style="color:red;width:100px;"></div>


<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

И в обратном направлении:

.hex {
  width: 200px;
  display: inline-block;
  margin:0 5px;
  color:orange;
  filter: url('#goo');
}

.hex::before {
  content: "";
  display: block;
  background:currentColor;
  padding-top: 115%; /* 100%/cos(30)  */
  clip-path: polygon(0% 25%,0% 75%,50% 100%,100% 75%,100% 25%,50% 0%);
}
<div class="hex"></div>
<div class="hex" style="color:blue;width:150px;"></div>
<div class="hex" style="color:red;width:100px;"></div>


<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

Свободный перевод ответа от участника @Temani Afif.

→ Ссылка
Автор решения: Alexandr_TT

Я думаю, вы это ищете:

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

fiddle

Свободный перевод ответа от участника @Alex Char.

→ Ссылка
Автор решения: Alexandr_TT

Вариант SVG Shapes + svg filter feColorMatrix

Берем svg path для 8-ми угольной звезды с острыми лучами

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink"
     width="400" height="400" viewBox="0 0 400 400" >  
   
  <path  d="m200.1 27.9 32.7 91.9 88.1-41.9-41.9 88.1 91.9 32.7-91.9 32.7 41.9 88.1L232.8 277.5 200.1 369.4 167.5 277.5 79.4 319.4 121.3 231.3 29.4 198.7 121.3 166 79.4 77.9 167.5 119.8Z" style="fill:crimson;"/>
</svg>

Добавляем комбинацию фильтров: feColorMatrix и

feComposite in="SourceGraphic" in2="goo" operator="atop"/>
Обратите внимание на значение оператора atop

и после применения фильтров лучи закругляются

   



<svg version="1.1" xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink"
     width="400" height="400" viewBox="0 0 400 400" >  
   <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
            <feColorMatrix in="blur" mode="matrix"
                values="
                  1 0 0 0 0
                  0 1 0 0 0
                  0 0 1 0 0
                  0 0 0 29 -1"
                  result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
  <path filter="url(#goo)" d="m200.1 27.9 32.7 91.9 88.1-41.9-41.9 88.1 91.9 32.7-91.9 32.7 41.9 88.1L232.8 277.5 200.1 369.4 167.5 277.5 79.4 319.4 121.3 231.3 29.4 198.7 121.3 166 79.4 77.9 167.5 119.8Z" style="fill:crimson;"/>
</svg>

operator="xor"

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink"
     width="400" height="400" viewBox="0 0 400 400" >  
   <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
            <feColorMatrix in="blur" mode="matrix"
                values="
                  1 0 0 0 0
                  0 1 0 0 0
                  0 0 1 0 0
                  0 0 0 19 -9"
                  result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="xor"/>
        </filter>
    </defs>
  <path filter="url(#goo)" d="m200.1 27.9 32.7 91.9 88.1-41.9-41.9 88.1 91.9 32.7-91.9 32.7 41.9 88.1L232.8 277.5 200.1 369.4 167.5 277.5 79.4 319.4 121.3 231.3 29.4 198.7 121.3 166 79.4 77.9 167.5 119.8Z" style="fill:crimson;"/>
</svg>

Обводка контура

operator="xor" и 0 0 0 29 -1

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink"
     width="400" height="400" viewBox="0 0 400 400" >  
   <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
            <feColorMatrix in="blur" mode="matrix"
                values="
                  1 0 0 0 0
                  0 1 0 0 0
                  0 0 1 0 0
                  0 0 0 29 -1"
                  result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="xor"/>
        </filter>
    </defs>
  <path filter="url(#goo)" d="m200.1 27.9 32.7 91.9 88.1-41.9-41.9 88.1 91.9 32.7-91.9 32.7 41.9 88.1L232.8 277.5 200.1 369.4 167.5 277.5 79.4 319.4 121.3 231.3 29.4 198.7 121.3 166 79.4 77.9 167.5 119.8Z" style="fill:crimson;"/>
</svg>

Рамка с внутренними закругленными уголками

Берём за основу прямоугольник в SVG или CSS

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
           width="370" height="460" viewBox="0 0 370 460" >  
    <rect x="50" y="50" width="300" height="200"  fill="crimson" />
</svg>

Добавляем фильтр feColorMatrix с параметрами матрицы 0 0 0 22 -14:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
           width="370" height="460" viewBox="0 0 370 460" >  
     <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="16" result="blur" />    
            <feColorMatrix in="blur" mode="matrix"
                values="
                  0 0 0 0 0
                  0 0 0 0 0
                  0 0 0 0 0
                  0 0 0 22 -14"
                  result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="xor"/>
        </filter>
    </defs>

<rect x="50" y="50" width="300" height="200" filter="url(#goo)" fill="crimson" />
</svg>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.