Css3 Shapes - What's Possible

CSS3 Shapes - What's possible?

Check out this page for some examples: http://css-tricks.com/examples/ShapesOfCSS/. The examples use only a single HTML element, so more would be possible with added complexity.

Is it possible to make this shape in CSS3?

FIDDLE

Here is my approach:

div {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;

    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    transform: rotate(2deg);
    -webkit-backface-visibility: hidden;

    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
    transform-origin: top left;
}
div:after {
    content: "";
    display: block;
    position: absolute;
    border-style: solid;
    border-color: #FFF transparent transparent;
    border-width: 127px 0 25px 19px;
    right: 0;
}
div:before {
    background: rgba(255, 0, 0, 0.45);
    width: 668px;
    height: 240px;
    content: "";
    display: block;

    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
    transform-origin: top left;

    -webkit-transform: rotate(-9.5deg) skewX(1deg);
    -moz-transform: rotate(-9.5deg) skewX(1deg);
    -ms-transform: rotate(-9.5deg) skewX(1deg);
    -o-transform: rotate(-9.5deg) skewX(1deg);
    transform: rotate(-9.5deg) skewX(1deg);
}

I guess, jingesh kheni's solution might be more clean but I tried it and somehow the perspective property doesn't work for me.

EDIT:

According to OP's comment about rough edges of the div, I updated the fiddle and the code above. I simply added this line of CSS:

-webkit-backface-visibility: hidden;

These rough edges are a bug in Chrome, here's the explanation.

How to create a gullwing shape with CSS

The best solution using CSS would be to use some nested elements.
You could create a div (.pointy) with two other divs inside it (.curve-left & .curve-right).

The inner divs should be sided so that they each have half of the curve. So if your curve drops 10px and goes 20px horizontal, it's height should be 10px and the width 20px. Then give it a border radius in the top-left or top-right corner of 100%. Now the curve will go trough the entire div. You could then give it a gray background-color and the parent div white in the background. Then some simple CSS-tricks to center the .pointy-div and do the backgrounds, and voila, there is your curvy triangle-y thingy.

So example below.

#c1 {  position: relative;  width: 200px;  height: 190px;  overflow: hidden;}#c2 {  position: relative;  top: 0px;  width: 200px;  height: 200px;  background-color: gray;}.pointy {  position: absolute;  top: 0px;  left: 50%;  margin-left: -20px;  width: 40px;  height: 10px;  background-image: url("http://lorempixel.com/output/technics-q-c-200-200-4.jpg");  background-position:center bottom;}.pointy>.curve-left,.pointy>.curve-right{  position:absolute;  background-color:red;  width:20px;  height:10px;  background-image:url("http://lorempixel.com/output/technics-q-c-200-200-1.jpg");  }.pointy>.curve-left{  border-top-right-radius:100%;  background-position:120px 0;  left:0;  }.pointy>.curve-right{  border-top-left-radius:100%;  background-position:80px 0;  right:0;  }

<div id="c1">  <img src="http://lorempixel.com/output/technics-q-c-200-200-4.jpg" /></div><div id="c2">  <div class="pointy">    <div class="curve-left"></div>    <div class="curve-right"></div>  </div>  <img src="http://lorempixel.com/output/technics-q-c-200-200-1.jpg" /></div>

Can I make an irregular div shape using only CSS?

This will be impossible with a single div, because the div will always be rectangular. See the excellent answer here for a fuller explanation: How can I make a div with irregular shapes with css3 and html5?

Edit: This is actually possible with the clip-path CSS attribute, as helpfully pointed out by @ZachSaucier in the comments. Demo You learn something new every day!

is it possible to create a background like this using css3?

Thanks everyone, I see there are many different ways to achieve the same result, However as I needed to have this pattern as a background for my menu, I ended up using the bellow style:

.navbar {
background: linear-gradient(45deg, white 25%, 
    rgba(140, 25, 29, 1) 25%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
height: 90px;   
 }

Is it possible to do this shape CSS?

some clip-path and pseudo element can approximate this:

.box {
  width: 300px;
  aspect-ratio: .8;
  position: relative;
  z-index: 0;
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
}

.box:before {
  clip-path: polygon(0 0, 100% 50%, 10% 100%,0 100%);
  background: linear-gradient(40deg, #3185c5, #0ea1b1);
}

.box:after {
  clip-path: polygon(100% 30%, 100% 50%, 10% 100%,0% 100%, 0 80%);
  background: linear-gradient(40deg, #3185c5, #f55778);
}

<div class="box"></div>

Is it possible to differentiate between two of the same shape in HTML and CSS?

Yes, you can do it like this. Target the rectangle class that is inside of the header by using .header .rectangle. I hope this helps!

.rectangle {
  height: 10px;
  background: red;
}

.header .rectangle {
  background: blue;
}

<body>
  <div class="header">
    <div class="rectangle"></div>
    <h1>Head</h1>
  </div>

  <div class="rectangle"></div>

</body>

---

Related Topics