Unable to have a div with sharp corner instead getting it as rounded corner

Question

I am trying to have a sharp cut div on the top right but instead using the border-top-right radius

I am getting a rounded corner on the top right.

How can we achieve this using only CSS

Currently how I am getting is rounded corners the rounded corners I am getting with the below code

Code sandbox link:- Sandbox

.container {
  width: 150px;
  height: 150px;
  position: relative;
  margin: 30px;
}

.box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.7;
  background: #0057e3;
}

.overlay {
  z-index: 9;
  background: red;
  border-top-right-radius: 65px;
}

<div class="container">
  <div class="box"></div>
  <div class="box overlay"></div>
</div>

Instead How I need the div to be is sharp corners

How can I make the div as sharp corners only on the top right?

No I did not try is there any example for it for the similar requirment — Veramosu Abhinav, Jun 14 '22 at 05:42
Why are you using border-radius? Border-radius is specifically for making rounded corners, so you do not need it. Not sure exactly what you're asking as your sandbox link already has the answer — just use clip-path. — harryburk, Jun 14 '22 at 05:49

score 2 · Accepted Answer · answered Jun 14 '22 at 05:56

We can use before or after psuedo element to achieve this effect.

HTML

<div>
  <h1>Hello</h1>
  <div class="container">
    <div class="box"></div>
  </div>
</div>

CSS

.box {
  width: 100%;
  height: 100%;
  position: relative;
  opacity: 0.7;
  background: #0057e3;
  border-radius: 10px;
  overflow: hidden;
}

.box::before {
  content: "";
  position: absolute;
  top: -45px;
  right: -45px;
  width: 200px;
  height: 30px;
  transform: rotate(45deg);
  background: red;
}

score 0 · Answer 2 · answered Jun 14 '22 at 05:48

You can use clip-path instead of a rounded corner.

Here's the HTML/CSS of your code with just that alteration:

html,
body {
  font-family: sans-serif;
  h1 {
    color: tomato;
  }
}

.container {
  width: 150px;
  height: 150px;
  position: relative;
  margin: 30px;
}

.box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.7;
  background: #0057e3;
}

.overlay {
  z-index: 9;
  background: red;
  /*border-top-right-radius: 65px;*/
  clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%);
}

<div class="container">
  <div class="box"></div>
  <div class="box overlay"></div>
</div>

score 0 · Answer 3 · answered Jun 14 '22 at 05:51

You can't have sharp corners in pure CSS using the border-radius

A workaround is to use -webkit-mask

.overlay {
  -webkit-mask: linear-gradient(to top right, #FFF 85%, #ffffff00 85%) top left;
  background: hotpink;
  position:absolute;
  width:100%;
  height:100%:
}

div {
  width:200px;
  height:200px;
  position: relative;
  background: cyan;
}

<div>
  <div class='overlay'>
  Corner using webkit-mask
  </div>
</div>

Check this for more details

Unable to have a div with sharp corner instead getting it as rounded corner

3 Answers3