CODEWITHSUNDEEP
htmlcsscss-shapes
Akila
Akila

Reputation: 47

How to make top and bottom of div triangle with CSS?

Right now I got this:

http://www.xup.to/dl,13319328/example.jpg

Its three DIVs. The first one at the top is Triangle-Shaped, the one in the Center is a normal DIV without any shape and the third one, at the bottom is Triangle-Shaped again. All shapes are formed via CSS (border-transparency)

I would like to combine the three DIVs into one without losing the Shape of the whole construct. Is this possible?

Here is my HTML-Code:

<div id="triangle1"></div> /* triangle at the top */
<div id="center">
<p>Text Text Text</p>
<div id="triangle2"></div> /* triangle at the bottom */

And here is the CSS-Code:

#center {
    background-color: #E0E0E0;
    position: absolute;
    width: auto;
    height: auto;
    top: 100px;
    left: 20%;
    right: 20%;
    text-align: justify;
    padding-left: 3%;
    padding-right: 3%;
}

#triangle1 {
    width: 0;
    height: 0;
    top: 20px;
    border-style: solid;
    border-width: 0 1143px 80px 0px;
    border-color: transparent transparent #E0E0E0 transparent;
    left: 20%;
    right: 20%;
    position: absolute;
}

#triangle2 {
    width: 0;
    height: 0;
    top: 312px;
    border-style: solid;
    border-width: 80px 0 0 1152px;
    border-color: #E0E0E0 transparent transparent transparent;
    left: 20%;
    right: 20%;
    position: absolute;
}

I would like to combine the code of #triangle1 and #triangle2 into #center without losing the look it has right now (as seen on the Screenshot). But how?

Thank you so far.

Upvotes: 3

Views: 1386

Answers (1)

Jay
Jay

Reputation: 3515

You could use CSS transforms to accomplish this.

transform: skewY(3deg);

Transforming the parent has a side effect, its descendent (paragraph with text) will also be skewed. An easy fix is to reverse the transform on a descendent element.

Here is a quick demo.

You might need to add browser-specific prefixes for older browsers:

-moz-transform: skewY(3deg);
-webkit-transform: skewY(3deg);
-o-transform: skewY(3deg);
-ms-transform: skewY(3deg);
transform: skewY(3deg);

Upvotes: 3

Related Questions