Question 309162 in CSS Question posted in
Some basic documentation can be found here.

How to achieve local transparency of borders in CSS?

enter image description here

How can I achieve the border effect as shown in the picture?

My previous solution was to use pseudo elements to achieve the effect of a mask layer. But if my background is an image or gradient, it will be difficult to adjust the color of the mask layer. How can I achieve local transparency of the border and directly obtain the background color?

Tags:

2

Answers


  1. 0

    Not sure if this is possible purely with CSS rules, so my solution would be to create an SVG image and set it as the background image.

    body {
  background-image: url("https://picsum.photos/seed/picsum/200/300");
}

div {
  width: 116px;
  height: 46px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="116" height="46" viewBox="0 0 116 46" fill="none"><path d="M53 3H23C23 3 3 3 3 23C3 43 23 43 23 43H93C93 43 113 43 113 23C113 3 93 3 93 3H83" stroke="black" stroke-width="5"/></svg>');
  background-repeat: no-repeat;
  box-sizing: border-box;
  padding: 5px;
  border-radius: 999px;
}
    <body>
  <div></div>
 </body>
    Login or Signup to reply.
  2. 0

    You can use mask:

    .box {
  width: 250px;
  height: 100px;
  border: 10px solid;
  border-radius: 999px;
  margin: 10px;
  
  -webkit-mask:
    linear-gradient(#000 0 0) no-repeat
      70% 0/80px 10px, /* 70%: control the position | 80px: control the width | 10px: equal to border thickness */
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

body {
  background: linear-gradient(90deg,pink,lightblue);
}
    <div class="box"></div>
<div class="box" style="width: 400px"></div>
<div class="box" style="width: auto"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search