CODEWITHSUNDEEP
htmlcss
jhalden
jhalden

Reputation: 21

Making rounded triangle shape using CSS

enter image description here

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!

Upvotes: 0

Views: 2311

Answers (4)

Nenad Vracar
Nenad Vracar

Reputation: 122027

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>

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114990

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>

Upvotes: 6

Pepo_rasta
Pepo_rasta

Reputation: 2900

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>

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105863

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>

Upvotes: 3

Related Questions