CODEWITHSUNDEEP
csscss-shapes
s_p
s_p

Reputation: 4693

irregular shape background - css

I am using this tutorial to make a Triangle Top Left like so:

#triangle-topleft {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
}

output: enter image description here


but how can I make an irregular shape similar to this but cut out a corner on the bottom right? ex:enter image description here

the html is straight forward : <div id='triangle-topleft'><div>

Upvotes: 1

Views: 4007

Answers (5)

Christian Ferrier
Christian Ferrier

Reputation: 42

Wrap the div in another div that is slightly smaller and overflow: hidden

#triangle-topleft {
	border-top: 120px solid red;
	border-right: 120px solid transparent;
    position:absolute;
    left:0px;
    top:0px;
}
#container {
    position:absolute;
    width: 90px;
    height: 90px;
    overflow:hidden;
}
<div id='container'>
    <div id='triangle-topleft'></div>
</div>

Upvotes: 2

Rise Ledger
Rise Ledger

Reputation: 969

You can wrote something like this:

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
    position:absolute;top:0;left:0;
}

.outer-div {position:relative;width:80px;height:80px;overflow:hidden;}
 <div class="outer-div">
    <div id="triangle-topleft"></div>
 </div>

Upvotes: 3

web-tiki
web-tiki

Reputation: 103790

You can use a rotated pseudo element. The approach is similar to the one described here but the transform origin is changed to 15% 100% :

DEMO

div{
    position:relative;
    width:100px;height:100px;
    overflow:hidden;
}
div:before{
    content:'';
    position:absolute;
    left:0; bottom:0;
    width:200%; height:200%;
    transform-origin: 15% 100%;
    transform:rotate(-45deg);
    background:red;
}

/* FOR THE DEMO */

body{background:url('http://lorempixel.com/output/people-q-c-640-480-8.jpg');background-size:cover;}
  
<div></div>

Transforms are supported by IE9 and over.

Note that I didn't include the vendor prefixes in the snippet. They are included in the fiddle demo.

Upvotes: 3

G-Cyrillus
G-Cyrillus

Reputation: 105923

You can use a gradient to fill up background with a transparent part.

.Ttrgle {
  display:inline-block; /* or whatever or absolute position that allows to size it */
  width:100px;
  height:100px;
  background:linear-gradient(to top left, transparent 33%, red 33%);
  }
html {
  background:linear-gradient(45deg, gray,white,blue,purple,yellow,green,lime,pink,turquoise)
    }
<span class="Ttrgle"></span>

Upvotes: 5

Paulie_D
Paulie_D

Reputation: 115109

You could use a linear gradient

body {
  background: #bada55;
}
div {
  width: 200px;
  height: 200px;
  background-image: linear-gradient(to bottom right, red, red 60%, transparent 60%);
}
<div></div>

Upvotes: 4

Related Questions