Making rounded triangle shape using CSS

Question

I have been trying to create this shape in the bottom left and top right corners of the page. Unfortunately, I have not been able to create the desired look the closest that I have been able to achieve is a pie shape with the following code:

<style>

  /* css code that will create, color, and shape
     the first accent color area */
  #colorAreaOne{

    width: 700px;
    height: 700px;
    background: #3333ff;
    opacity: 0.8;
    border-radius: 0 700px 0 0;
    -moz-border-radius: 0 700px 0 0;
    -webkit-border-radius: 0 700px 0 0;
    position: fixed;
    bottom: 0px;
    left: 0px;

  }

  /* css code that will create, color, and shape
     the second accent color area */
  #colorAreaTwo{

    width: 700px;
    height: 700px;
    background: #3333ff;
    opacity: 0.8;
    border-radius: 0 0 700px; 0;
    -moz-border-radius: 0 0 700px 0;
    -webkit-border-radius: 0 0 700px 0;
    position: fixed;
    top: 0px;
    right: 0px;

  }

</style>

If anyone has any information it would be much appreciated. Thank you!

Your question is missing HTML, please add it.

TylerH
– TylerH

2016-11-28 16:03:36 +00:00
Commented Nov 28, 2016 at 16:03 — TylerH
– TylerH, Commented Nov 28, 2016 at 16:03

Paulie_D · Accepted Answer · 2016-11-28 16:07:39Z

6

A radial-gradient

div {
  width: 700px;
  height: 700px;
  margin: 1em auto;
  background-image: radial-gradient(circle at 100% 0, transparent 0%, transparent 700px, black 700px);
}

<div></div>

edited Nov 28, 2016 at 16:07

answered Nov 28, 2016 at 16:03

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

G-Cyrillus · Accepted Answer · 2016-11-28 16:04:05Z

3

You may use a square and use a round pseudo to fill parts of it with a shadow

div {
  height:50vw;
  width:50vw;
  bottom:0;      
  position:fixed;
  overflow:hidden;
  }
div:before {
  content:'';
  display:block;
  height:100%;
  border-radius:0  0 0 50% ;
  box-shadow:0 0 0 50vw turquoise;

<div></div>

answered Nov 28, 2016 at 16:04

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

Comments

Pepo_rasta · Accepted Answer · 2016-11-28 16:05:13Z

1

border-radius: 50%; overflow: hidden;

.shape{
  width: 400px;
  height: 400px;
  overflow: hidden;
  position: relative;
}
.shape:after{
  content: "";
  position: absolute;
  left: -100%;
  bottom: -100%;
  width: 200%;
  height: 200%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 400px solid;

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

answered Nov 28, 2016 at 16:05

Pepo_rasta

2,91015 silver badges21 bronze badges

Comments

Nenad Vracar · Accepted Answer · 2016-11-28 16:08:04Z

0

Here is one quick solution that will work if pseudo element is same color as background.

.el {
  width: 200px;
  height: 200px;
  background: black;
  position: relative;
  overflow: hidden;
  margin: 50px;
}
.el:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200%;
  height: 200%;
  background: white;
  border-radius: 50%;
}

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

answered Nov 28, 2016 at 16:08

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Collectives™ on Stack Overflow

Making rounded triangle shape using CSS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related