How to create inverse border radius?

user_14098829 0
Viewed 107

How to achieve this type of text highlighting using CSS?

enter image description here

This is my result and the code below combining CSS and vuetify.

enter image description here

<div>
  <div class="tittle-font pt-4 rounded-t-xl ">
    SOFTWARE
  </div>
  <br/>
  <div class="tittle-font rounded-tr-xl ">
    DEVELOPMENT
  </div>
  <br/>
  <div class="tittle-font pb-4 rounded-b-xl rounded-tr-xl">
    AND CONSULTING
  </div>
</div>

.tittle-font {
    font-size: calc(34px + (36 + 36 * 0.7) * ((100vw - 320px) / 1920));
    line-height: calc(46px + (65 + 65 * 0.7) * ((100vw - 320px) / 1920));
    font-weight: 300;
    background-color: #fff500;
    display: inline-block;
    padding-left: 30px;
    padding-right: 30px;
  }
vuetify.js css
2 Answers

You can use after and before pseudo elements.

First of all our boxes will have position:relative and our pseudo elements need to have position:absolute

I create a circle and make it tangent to borders with ::after

enter image description here

Than i create another square and put it into corner which have lower z-index and have overflow:hidden

z-index is important here because when we set background color of circle to body color(which is white here), circle will disappear and the only thing left is ::before element which seems to have inverse border radius

enter image description here

*,
*::before,
*::after {
  box-sizing: border-box;
}


.tittle-font {
  position: relative;
  font-size: calc(34px + (36 + 36 * 0.7) * ((100vw - 320px) / 1920));
  line-height: calc(46px + (65 + 65 * 0.7) * ((100vw - 320px) / 1920));
  font-weight: 300;
  background-color: #fff500;
  display: inline-block;
  padding-left: 30px;
  padding-right: 30px;
}

.box-1{
  
  border-top-left-radius:1rem ;
  border-top-right-radius: 1rem;
}
.box-2{
  border-top-right-radius: 1rem;
}

.box-3{
  border-top-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

.box-1::after{
  content: "";
  position: absolute;
  width: 2rem;
  height: 2rem;
  background-color: white;
  z-index:5;
  right: -2rem;
  bottom:0rem;
  border-radius: 100%;
}

.box-1::before{
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  background-color: #fff500;
  z-index:4;
  right: -1rem;
  bottom:0rem;
  overflow: hidden;
}

.box-2::after{
  content: "";
  position: absolute;
  width: 2rem;
  height: 2rem;
  background-color: white;
  z-index:5;
  right: -2rem;
  bottom:0rem;
  border-radius: 100%;
}

.box-2::before{
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  background-color: #fff500;
  z-index:4;
  right: -1rem;
  bottom:0rem;
  overflow: hidden;
}
 <div>
      <div class="tittle-font pt-4 box-1 rounded-t-xl">SOFTWARE</div>
      <br />
      <div class="tittle-font rounded-tr-xl box-2">DEVELOPMENT</div>
      <br />
      <div class="tittle-font pb-4 rounded-b-xl rounded-tr-xl box-3">
        AND CONSULTING
      </div>
</div>

user_177557770

simple way and of course you can add padding, border-radius or any styling you need. hope this help <3

span{
    background-color: #FFFF00;
    width: fit-content;
    }
<div>
  <span>some heighlighted text here.</span> with simple way
</div>

user_75313540
Related