css - How to add border to the mask structure? - Stack Overflow

admin管理员组

文章数量:1406924

I am trying to achieve one shape(like below).

I have taken the shape code from /

But, the problem I am facing is with the border, I need to add border to my shape, the mask is causing the border to not be shown.

How can I create a border in exact same shape.

I have already looked for similar questions but they use the URL for image, which is not possible in my case. Another solution that I tried was wrapping in another div which was a solution on StackOverflow but it's not accurate, it's create somewhere thick, somewhere thin border.

This is my jsfiddle example /

I am using this to accomodate the shape

.inverted-radius {
position:relative;
  --r: 20px; /* the radius */
  --s: 30px; /* size of inner curve */
  --x: 15px; /* horizontal offset (no percentane) */
  --y: 10px; /* vertical offset (no percentage) */
  
  width: 450px;
  border: 2px solid #00000038;
  aspect-ratio: 1.5;
  background: white;
  border-radius: var(--r);
  --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
  --_g:conic-gradient(from 90deg at calc(100% - var(--r)) calc(100% - var(--r)),#0000 25%,#000 0);
  --_d:(var(--s) + var(--r));
  mask:
    calc(100% - var(--_d) - var(--x)) 100% var(--_m),
    100% calc(100% - var(--_d) - var(--y)) var(--_m),
    radial-gradient(var(--s) at 100% 100%,#0000 99%,#000 calc(100% + 1px)) 
     calc(-1*var(--r) - var(--x)) calc(-1*var(--r) - var(--y)),
    var(--_g) calc(-1*var(--_d) - var(--x)) 0,
    var(--_g) 0 calc(-1*var(--_d) - var(--y));
  mask-repeat: no-repeat;
}

I tried adding mask-border or some gradient but that does not work.

body {
  background-color: lightblue;
}

.parent {
  position: relative;
  width: 450px;
}

.inverted-radius {
  position: relative;
  --r: 20px;
  /* the radius */
  --s: 30px;
  /* size of inner curve */
  --x: 15px;
  /* horizontal offset (no percentane) */
  --y: 10px;
  /* vertical offset (no percentage) */

  width: 450px;
  border: 2px solid #00000038;
  aspect-ratio: 1.5;
  background: white;
  border-radius: var(--r);
  --_m: /calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%, #0000 72%);
  --_g: conic-gradient(from 90deg at calc(100% - var(--r)) calc(100% - var(--r)), #0000 25%, #000 0);
  --_d: (var(--s) + var(--r));
  mask:
    calc(100% - var(--_d) - var(--x)) 100% var(--_m),
    100% calc(100% - var(--_d) - var(--y)) var(--_m),
    radial-gradient(var(--s) at 100% 100%, #0000 99%, #000 calc(100% + 1px)) calc(-1*var(--r) - var(--x)) calc(-1*var(--r) - var(--y)),
    var(--_g) calc(-1*var(--_d) - var(--x)) 0,
    var(--_g) 0 calc(-1*var(--_d) - var(--y));
  mask-repeat: no-repeat;
  mask-border-slice: 10 15 5 7;
  mask-border-source: linear-gradient(90deg, #f00, #00f);
}

/* HTML: <div class="plus"></div> */
.plus {
  --c: #59DF9B;
  position: absolute;
  bottom: 0;
  right: 6px;
  height: 40px;
  aspect-ratio: 1;
  box-shadow: 0 0 0 35px inset var(--c);
  border-image: conic-gradient(var(--c) 0 0) 50%/calc(50% - 15px);
  clip-path: circle();
  /* remove this if you don't want a rounded shape */
}

<div class="parent">

  <div class="inverted-radius">

    <h1 class="f">features</h1>
    <div class="inner">
      <p>This is a paragraph.</p>
      <p>This is a paragraph.</p>
      <p>This is a paragraph.</p>
      <p>This is a paragraph.</p>
    </div>


  </div>
  <div class="plus"></div>
</div>

I am trying to achieve one shape(like below).

I have taken the shape code from https://css-shape/inverted-radius/

But, the problem I am facing is with the border, I need to add border to my shape, the mask is causing the border to not be shown.

How can I create a border in exact same shape.

I have already looked for similar questions but they use the URL for image, which is not possible in my case. Another solution that I tried was wrapping in another div which was a solution on StackOverflow but it's not accurate, it's create somewhere thick, somewhere thin border.

This is my jsfiddle example https://jsfiddle/h4L5u367/

I am using this to accomodate the shape

.inverted-radius {
position:relative;
  --r: 20px; /* the radius */
  --s: 30px; /* size of inner curve */
  --x: 15px; /* horizontal offset (no percentane) */
  --y: 10px; /* vertical offset (no percentage) */
  
  width: 450px;
  border: 2px solid #00000038;
  aspect-ratio: 1.5;
  background: white;
  border-radius: var(--r);
  --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
  --_g:conic-gradient(from 90deg at calc(100% - var(--r)) calc(100% - var(--r)),#0000 25%,#000 0);
  --_d:(var(--s) + var(--r));
  mask:
    calc(100% - var(--_d) - var(--x)) 100% var(--_m),
    100% calc(100% - var(--_d) - var(--y)) var(--_m),
    radial-gradient(var(--s) at 100% 100%,#0000 99%,#000 calc(100% + 1px)) 
     calc(-1*var(--r) - var(--x)) calc(-1*var(--r) - var(--y)),
    var(--_g) calc(-1*var(--_d) - var(--x)) 0,
    var(--_g) 0 calc(-1*var(--_d) - var(--y));
  mask-repeat: no-repeat;
}

I tried adding mask-border or some gradient but that does not work.

body {
  background-color: lightblue;
}

.parent {
  position: relative;
  width: 450px;
}

.inverted-radius {
  position: relative;
  --r: 20px;
  /* the radius */
  --s: 30px;
  /* size of inner curve */
  --x: 15px;
  /* horizontal offset (no percentane) */
  --y: 10px;
  /* vertical offset (no percentage) */

  width: 450px;
  border: 2px solid #00000038;
  aspect-ratio: 1.5;
  background: white;
  border-radius: var(--r);
  --_m: /calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%, #0000 72%);
  --_g: conic-gradient(from 90deg at calc(100% - var(--r)) calc(100% - var(--r)), #0000 25%, #000 0);
  --_d: (var(--s) + var(--r));
  mask:
    calc(100% - var(--_d) - var(--x)) 100% var(--_m),
    100% calc(100% - var(--_d) - var(--y)) var(--_m),
    radial-gradient(var(--s) at 100% 100%, #0000 99%, #000 calc(100% + 1px)) calc(-1*var(--r) - var(--x)) calc(-1*var(--r) - var(--y)),
    var(--_g) calc(-1*var(--_d) - var(--x)) 0,
    var(--_g) 0 calc(-1*var(--_d) - var(--y));
  mask-repeat: no-repeat;
  mask-border-slice: 10 15 5 7;
  mask-border-source: linear-gradient(90deg, #f00, #00f);
}

/* HTML: <div class="plus"></div> */
.plus {
  --c: #59DF9B;
  position: absolute;
  bottom: 0;
  right: 6px;
  height: 40px;
  aspect-ratio: 1;
  box-shadow: 0 0 0 35px inset var(--c);
  border-image: conic-gradient(var(--c) 0 0) 50%/calc(50% - 15px);
  clip-path: circle();
  /* remove this if you don't want a rounded shape */
}

<div class="parent">

  <div class="inverted-radius">

    <h1 class="f">features</h1>
    <div class="inner">
      <p>This is a paragraph.</p>
      <p>This is a paragraph.</p>
      <p>This is a paragraph.</p>
      <p>This is a paragraph.</p>
    </div>


  </div>
  <div class="plus"></div>
</div>

• css
• css-mask

Share Improve this question Follow edited Mar 21 at 9:10 DarkBee 15.5k88 gold badges7272 silver badges117117 bronze badges asked Mar 21 at 8:43 TwinkleTwinkle 9711 silver badge88 bronze badges 3

• 1 "the mask is causing the border to not be shown" - the border is still following the "original" shape of the element, and your mask simply cuts a corner out of that whole thing - so of course this can't achieve the desired result. "Another solution that I tried was wrapping in another div which was a solution on StackOverflow but it's not accurate, it's create somewhere thick, somewhere thin border." - can you show us that attempt, please? Maybe someone can suggest some modifications then. – C3roe Commented Mar 21 at 8:55
• jsfiddle/86xLar2s – Twinkle Commented Mar 21 at 9:53
• That appears to be using the exact same radius, size & offsets for the border mask, and the border element is positioned -2px to the top and left - that is probably not the best approach. I would try to nest the two elements, give the outer one your desired border color as background color, and then apply a slightly larger mask to the outer element - combined with this 30secondsofcode./css/s/nested-border-radius to get the outside and inside curves to match better. – C3roe Commented Mar 21 at 10:17

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

2 solutions proposed: first with 4 html divs and some css borders

:root {
  --corner-size: 2rem;
  --border-radius: 0.5rem;
  --background-inner: #78B8B0;
  --background-outer: #14171F;
  --border-color: red;
}

html, body {
  background: var(--background-outer);
}

.container {
  width: 200px;
  height: 200px;
  position: relative;
  z-index: 1;
  
  & .container-main {
    position: absolute;
    top: 0;
    left: 0;
    right: calc(var(--corner-size) - 0.5rem);
    bottom: calc(var(--corner-size) - 0.5rem);
    background: var(--background-inner);
    border-top-left-radius: var(--border-radius);
    border-top: 2px solid var(--border-color);
    border-left: 2px solid var(--border-color);
  }
  & .container-right {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--corner-size);
    bottom: var(--corner-size);
    background: var(--background-inner);
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    border-top: 2px solid var(--border-color);
    border-right: 2px solid var(--border-color);
    border-bottom: 2px solid var(--border-color);
  }
  & .container-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    height: var(--corner-size);
    right: var(--corner-size);
    background: var(--background-inner);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    border-left: 2px solid var(--border-color);
    border-bottom: 2px solid var(--border-color);
    border-right: 2px solid var(--border-color);
  }
  & .container-corner {    
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    height: calc(var(--corner-size) - 0.5rem);
    width: calc(var(--corner-size) - 0.5rem);
    border-top-left-radius: var(--border-radius);
    background: var(--background-outer);
    border-left: 2px solid var(--border-color);
    border-top: 2px solid var(--border-color);
    &:before {
      content: ' ';
      position: absolute;
      z-index: -1;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--background-inner);
    }
  }
}

<div class='container'>

  <div class='container-right'>
  </div>
  <div class='container-bottom'>
  </div>
  <div class='container-main'>
    <h1>HELLO</h1>
  </div>
  <div class='container-corner'>
  </div>
  
</div>

Another one, probably better, using SVG path to define the shape and use it as background

html, body {
  background: #14171F;
  padding: 2rem;
}
.container {
  position: relative;
  width: 300px;
  height: 300px;
  & .background {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  & .content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

<div class="container">
  <svg 
    class="background" 
    viewBox="0 0 100 100"
    fill="#78B8B0"
  >
    <path d="
        M 0 5
        L 0 95
        A 5 5 0 0 0 5 100
        L 80 100
        A 5 5 0 0 0 85 95
        L 85 90
        A 5 5 0 0 1 90 85
        L 95 85
        A 5 5 0 0 0 100 80
        L 100 5
        A 5 5 0 0 0 95 0
        L 5 0
        A 5 5 0 0 0 0 5
    " />
  </svg>
  <div class="content">
    <h1>Hello</h1>
  </div>
</div>

本文标签： cssHow to add border to the mask structureStack Overflow