Html Question posted in
Some basic documentation can be found here.

Html – How can I add a white border inside the shape?

How can I add a white border inside the shape like this?

enter image description here

The code below was from https://stackoverflow.com/a/65504158.

I just made some slight changes.

.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>

I tried to add the border property to the hexagon but it wouldn’t show.

Tags:

2

Answers


  1. 0 
        .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>
    Login or Signup to reply.
  2. 0

    You should put another tag nearby image you have write code for that…..

    you will be archive the code…

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search