0
294
ViewsUnable to have a div with sharp corner instead getting it as rounded corner
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?
·
Santiago Gelvez
3 answers
Answer question0
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;
}
·
Santiago Gelvez
Report
0
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>
·
Santiago Gelvez
Report
0
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
·
Santiago Gelvez
Report
Answer question