How to make a right angled triangular cut on a div?

Question

This is the result I want:

I am using borders like:

border: 10px blue solid;
border-right: 10px white solid;

but it just makes a trapezium like shape on the right side. Is there any way to achieve what I want in pure CSS? The div itself might contain some other DOM elements like p, h1-h6 or some other divs.

I have posted the CSS. I don't think rest of the CSS is relevant. It just sets background color and padding. — SanJeet Singh, Mar 17 '16 at 04:18

ketan · Accepted Answer · 2016-03-17T04:32:47.773

8

It's simple. Just use following css:

.shape {
    border-top: 100px solid blue;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}

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

Edit:

Following will work if there is another element inside it.

.shape {
    background: blue;
    height: 100px;
    position: relative;
    width: 150px;
  color:white;
}
.shape::before {
    background: blue none repeat scroll 0 0;
    content: "";
    height: 100px;
    position: absolute;
    right: -25px;
    transform: skew(-20deg);
    width: 50px;
}

<div class="shape">
 <span>Hello</span> 
 <div> Test message </div>
</div>

edited Mar 17 '16 at 04:32

answered Mar 17 '16 at 04:21

ketan

19,129
42
60
98

thanks :). But It doesn't work if there is some other DOM element inside the div. – SanJeet Singh Mar 17 '16 at 04:25
@SanJeetSingh check my edited answer. – ketan Mar 17 '16 at 04:32

How to make a right angled triangular cut on a div?

1 Answers1