CODEWITHSUNDEEP
cssgeometrydraw
Thanh Nguyen
Thanh Nguyen

Reputation: 5352

Drawing a triangle with rounded bottom in CSS?

In css I can draw a triangle as following:

triangle 

.triangle{
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 200px 200px 0;
    border-color: transparent #48a665 transparent transparent;
}

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

Jsfiddle

Now I want to draw a triangle with rounded at bottom like this:

border-radius

Is it possible to make it with CSS?

Upvotes: 3

Views: 3481

Answers (2)

Ruddy
Ruddy

Reputation: 9923

So we create a circle and place it on top to make it look like how you want it, you get something like this:

CSS:

.triangle{
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 200px 200px 0;
    border-color: transparent #48a665 transparent transparent;
}
.triangle:after {
    content: "";
    display: block;
    width: 400px;
    height: 400px;
    background: #fff;
    border-radius: 200px;
    left: -190px;
    position: absolute;
}

You need to set the background color (currently #fff ) to match the background it is placed on.

DEMO HERE

Upvotes: 1

SW4
SW4

Reputation: 71240

On the assumption of a solid background area for the concave section, you can use:

Demo Fiddle

CSS

div {
    background:red;
    height:200px;
    width:200px;
    position:relative;
    overflow:hidden;
}
div:after {
    position:absolute;
    content:'';
    display:block;
    height:200%;
    width:200%;
    left:-100%;
    background:white; /* <-- change as appropriate */
    border-radius:100%;
}

This simply overlays an offset circle onto the element, positioned to cover up a section of it to leave the appearance of the element being concave.

Upvotes: 3

Related Questions