Есть ли способ добавить белую рамку внутри этого div?

Есть ли способ добавить белую рамку внутри этого div, как показано на рисунке ниже?

Код ниже взят из https://stackoverflow.com/a/65504158.

Я просто немного его реорганизовал.

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

.mask {
  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%);
}

img {
    position: absolute;
    top:0; 
    bottom: 0;
    left: 0; 
    right:0;
    width: 100%;
    height: 100%;
}

<div class = "hexagon">
  <div class = "mask">
    <img src = "https://images.unsplash.com/photo-1724884564497-f5024b7e2f93?q=80&w=257" />
  </div>
</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>

Я попытался добавить свойство границы к шестиугольнику, но оно не отобразилось.

🤔 А знаете ли вы, что...
HTML (HyperText Markup Language) - это стандартный язык разметки для создания веб-страниц.

[РЕШЕНО]Перейти к решению

137

Html113619 вопросов Css75481 вопрос Svg4942 вопроса

Ответы:

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

    .mask {
        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%);
    }

    img {
        position: absolute;
        top:0;
        bottom: 0;
        left: 0;
        right:0;
        width: 100%;
        height: 100%;
    }
    .border-mask{
        width: 70%;
        height: 73%;
        position: absolute;
        left: 14px;
        top: 15px;
        clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
        background: linear-gradient(-150deg, white 35px, transparent 0) bottom right, linear-gradient(30deg, white 35px, transparent 0) bottom left, linear-gradient(150deg, white 35px, transparent 0) top left, linear-gradient(-30deg, white 35px, transparent 0) top right;
        border: white solid 7px;
        margin: 10px;
    }

<div class = "hexagon">
    <div class = "mask">
        <img src = "https://images.unsplash.com/photo-1724884564497-f5024b7e2f93?q=80&w=257" />
        <div class = "border-mask"></div>
    </div>
</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>

Решено

SVG спешит на помощь

Как прокомментировал Paulie_D, многоугольники CSS могут в лучшем случае аппроксимировать закругленные углы (например, путем добавления множества вершин для имитации плавной кривой). Обходным решением может быть добавление элемента SVG в виде закругленного шестиугольника в качестве наложения.

:root {
  --hexfront: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86.6 100'><path fill='none' stroke='white' stroke-width='3' transform='scale(0.75)' transform-origin='50%' d='M38.97 2.5q4.33-2.5 8.66 0l34.64 20q4.33 2.5 4.33 7.5l0 40q0 5-4.33 7.5l-34.64 20q-4.33 2.5-8.66 0l-34.64-20q-4.33-2.5-4.33-7.5l0-40q0-5 4.33-7.5l34.64-20z'/></svg>");
}

.hexagon {
  width: 200px;
  display: inline-block;
  margin: 0 5px;
  line-height: 0;
  filter: url("#goo");
}

img {
  aspect-ratio: 1/1.15;
  width: 100%;
  height: 100%;
}

.mask {
  position: relative;
  display: block;
  clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
}

.mask:after {
  content: "";
  display: block;
  position: absolute;
  inset: 0%;
  height: 100%;
  width: 100%;
  background-image: var(--hexfront);
}

<div class = "hexagon">
  <div class = "mask">
    <img src = "https://images.unsplash.com/photo-1724884564497-f5024b7e2f93?q=80&w=257" />
  </div>
</div>

<h3>SVG Overlay</h3>
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86.6 100'><path fill='none' stroke='black' stroke-width='3' transform='scale(0.75)' transform-origin='50%' d='M38.97 2.5q4.33-2.5 8.66 0l34.64 20q4.33 2.5 4.33 7.5l0 40q0 5-4.33 7.5l-34.64 20q-4.33 2.5-8.66 0l-34.64-20q-4.33-2.5-4.33-7.5l0-40q0-5 4.33-7.5l34.64-20z'/></svg>

<svg style = "height:0;width:0; 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>

Я создал шестигранный путь с помощью этой специальной версии «SVG Polygon Generator» Варуна Вачара (без поддержки закругленных углов).

Замените путь CSS-клипа маской

Когда у нас уже есть «правильный» элемент <path>, мы также можем заменить отфильтрованный шестиугольник на <маска>, чтобы избежать некоторых проблем с кроссбраузерностью (... сафари), связанных с фильтром goo.

:root{
  --mask : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86.6 100'><defs><path id='hex' d='M38.97 2.5q4.33-2.5 8.66 0l34.64 20q4.33 2.5 4.33 7.5l0 40q0 5-4.33 7.5l-34.64 20q-4.33 2.5-8.66 0l-34.64-20q-4.33-2.5-4.33-7.5l0-40q0-5 4.33-7.5l34.64-20z'/></defs><rect width='100%' height='100%'/><use href='%23hex' fill='white' stroke='black'/></svg>");

  --hexfront : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86.6 100'><path fill='none' stroke='white' stroke-width='3' transform='scale(0.75)' transform-origin='50%' d='M38.97 2.5q4.33-2.5 8.66 0l34.64 20q4.33 2.5 4.33 7.5l0 40q0 5-4.33 7.5l-34.64 20q-4.33 2.5-8.66 0l-34.64-20q-4.33-2.5-4.33-7.5l0-40q0-5 4.33-7.5l34.64-20z'/></svg>");
  
}


.hexagon {
  width: 200px;
  display: inline-block;
  margin: 0 5px;
  position:relative;
  line-height:0;
}

img {
  aspect-ratio:1/1.15;
  width: 100%;
  height:100%;
}



.mask{
  mask-image: var(--mask);
  mask-mode: luminance;
  mask-size: contain;
  mask-repeat: no-repeat;
}


.mask:after {
  content: "";
  display: block;
  position: absolute;
  inset:0%;
  height: 100%;
  width: 100%;
  background-image: var(--hexfront);
}

<div class = "hexagon">
  <div class = "mask">
    <img src = "https://images.unsplash.com/photo-1724884564497-f5024b7e2f93?q=80&w=257" />
  </div>
</div>

Есть ли способ добавить белую рамку внутри этого div?

Ответы:

SVG спешит на помощь

Замените путь CSS-клипа маской

Интересные вопросы для изучения