irregular shape background - css

Question

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>

score 5 · Accepted Answer · answered Mar 18 '15 at 19:26

5

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>

answered Mar 18 '15 at 19:26

G-Cyrillus

101,410
14
105
129

thank you, can you explain a little how this works please `background:linear-gradient(to top left, transparent 33%, red 33%);` – t q Mar 18 '15 at 19:34
Nice solution, like it – Rise Ledger Mar 18 '15 at 19:35
1

@tq when you set the same value to gradient colors , they just start sharp from one to another, there is no fadding at all. the first value tells where to start and where to end , then each colors are taken one after each others , here only two. we start with transparent till 33%, then pickup next at 33% wich is red till 100% – G-Cyrillus Mar 18 '15 at 19:39

score 4 · Answer 2 · answered Mar 18 '15 at 19:23

4

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>

answered Mar 18 '15 at 19:23

Paulie_D

107,962
13
142
161

can you explain how this works please `background-image: linear-gradient(to bottom right, red, red 60%, transparent 60%);` – t q Mar 18 '15 at 19:39
1

it's just saying that the place that the red stops is the same place in the gradient that the transparent starts - https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient. = – Paulie_D Mar 18 '15 at 19:40

Rise Ledger · Answer 3 · 2015-03-18T19:33:41.130

3

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>

edited Mar 18 '15 at 19:33

answered Mar 18 '15 at 19:19

Rise Ledger

949
7
11

score 3 · Answer 4 · edited May 23 '17 at 11:43

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.

score 2 · Answer 5 · answered Mar 18 '15 at 19:57

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>

irregular shape background - css

5 Answers5