CODEWITHSUNDEEP
css
Grzegorz Jaskulski
Grzegorz Jaskulski

Reputation: 21

Rectangle with cutted triangle

How to make something like that in css?

https://www.dropbox.com/s/6ol23la6ey373gt/example.png

Upvotes: 1

Views: 470

Answers (1)

Talha Akbar
Talha Akbar

Reputation: 10040

you can add a border-image in .up to see full clone effect of above image!

Fiddle 

div.wrapper {
    background:#d89043;
    width:400px;
    height:300px;
    position:relative;
}
div.up {
  width:0px; 
  height:0px; 
  border-left:50px solid transparent;  /* left arrow slant */
  border-right:50px solid transparent; /* right arrow slant */
  border-bottom:50px solid #fff; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
  position:absolute;
  bottom:0;
  margin-left:40%;
}​

Upvotes: 1

Related Questions