How to make div top right corner croped

Question

I want make DIV like below image:

Please someone help me to achieve this

.div {
  height: 200px;
  background: blue;
  border-radius: 4px;
  border-top-right-radius: 40px;
}

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

Note: div background should be white

how it is duplicate there is not box shadow to div with white background — Vikas Jadhav, Oct 14 '19 at 11:44
I added 2 duplicates and white is a simple color that you can change easily if in the duplicate you found another color — Temani Afif, Oct 14 '19 at 11:46
edit your question to show *your try* and explain how this is not a duplicate. — Temani Afif, Oct 14 '19 at 11:49
@TemaniAfif in my question my div has white background with box shadow — Vikas Jadhav, Oct 14 '19 at 11:50
please take the time to read the duplicates, understand the tricks, then apply them to your case ... If you are waiting for a *ready-to-copy-paste* code then you are in the wrong place. all what you need and even more is detailed in the 10+ answers inside the duplicates — Temani Afif, Oct 14 '19 at 11:54

nazifa rashid · Answer 1 · 2019-10-14T14:36:23.987

3

.tag-wrap {
  height: 200px;
  width: 500px;
  background: #f7f7f7;
  border-radius: 4px;
  border-top-right-radius: 0;
  border-left:10px solid blue;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  filter: drop-shadow(3px 3px 3px rgba(50, 50, 0, 0.3));
}
.tag {
  background: #fff;
  height: 200px;
  clip-path: polygon(0% 0%, 90% 0, 100% 30%, 100% 100%, 0% 100%);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="tag-wrap">
  <div class="tag">
  </div>
</div>
</body>
</html>

I have used clip-path for this. You can use the below link to generate clip paths!

https://bennettfeely.com/clippy/

FYI clip path and box-shadow don't work together so you have to follow some rule. Here is the reference link https://css-tricks.com/using-box-shadows-and-clip-path-together/

edited Oct 14 '19 at 14:36

answered Oct 14 '19 at 10:49

nazifa rashid

1,469
1
9
20

you're most welcome :) – nazifa rashid Oct 14 '19 at 10:53
at right top should be straight line currently its little bit rounded..can you help me – Vikas Jadhav Oct 14 '19 at 10:55
1

Adjust your clip path for small devices – nazifa rashid Oct 14 '19 at 11:01
can we add shadow as per shown image? – Vikas Jadhav Oct 14 '19 at 11:23
with white background not gray – Vikas Jadhav Oct 14 '19 at 11:31
done, adjust bgcolor as u want – nazifa rashid Oct 14 '19 at 11:56
need box shadow too – Vikas Jadhav Oct 14 '19 at 11:57
already given check, maybe u can't see because the color is too light – nazifa rashid Oct 14 '19 at 12:00
Check i have made it more visible @VikasJadhav – nazifa rashid Oct 14 '19 at 12:06

Rafael Herscovici · Answer 2 · 2019-10-14T11:02:18.460

3

This is the best result i could get working

.parent {
  background: #ccc;
  height: 200px;
  position: relative;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-left:10px solid blue
}

.child {
  position: absolute;
  right: 0;
  background: #ccc;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent #fff transparent transparent;
}

<div class="parent">
  <div class="child">
  </div>
</div>

edited Oct 14 '19 at 11:02

answered Oct 14 '19 at 10:54

Rafael Herscovici

16,558
19
65
93

how to add shadow as per attached image? – Vikas Jadhav Oct 14 '19 at 11:31

Hardik Shimpi · Answer 3 · 2019-10-14T11:32:04.537

1

.cpath{
  background-color: #e6e6e6;
    padding: 20px 30px;
    clip-path: polygon(70% 0,100% 50%,100% 100%,0% 100%,0% 0%);
    width: 80px;
    height: 50px;
    border-left: 4px solid purple;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;

}

<div class="cpath">
</div>

edited Oct 14 '19 at 11:32

answered Oct 14 '19 at 11:24

Hardik Shimpi

412
7
13

A.Jain · Answer 4 · 2019-10-14T11:45:35.803

Use This CSS

.div {
      height: 200px;
      background: blue;
      border-radius: 4px;
      border-top-right-radius: 40px;
    }
    
        .div::before {
                content: '';
                position: absolute;
                top: 8px;
                right: 8px;
                border-top: 58px solid white;
                border-left: 40px solid #0012ff;
                width: 0;
            }

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

How to make div top right corner croped

4 Answers4