CODEWITHSUNDEEP
htmlcsscss-shapes
ssougnez
ssougnez

Reputation: 5886

Full width overlapping triangles

I currently need to make something with CSS that would look like this:

Full width overlapping triangles

I managed to do it with this:

.top {
  position: relative;
}
.top .gray-bar {
  position: absolute;
  width: 100%;
  height: 50px;
  background-color: #cdcbcc;
  -ms-transform: rotate(1.2deg);
  transform: rotate(1.2deg);
  margin-top: -25px;
  z-index: 2;
}
.top .cyan-bar {
  position: absolute;
  width: 100%;
  height: 90px;
  background-color: #2ca1ab;
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
  z-index: 1;
  margin-top: -30px;
  margin-left: -400px;
}
.top .purple-bar {
  position: absolute;
  width: 100%;
  height: 50px;
  background-color: #b71e4c;
  -ms-transform: rotate(0.7deg);
  transform: rotate(0.7deg);
  margin-top: -5px;
  z-index: 0;
}
<div class="top">
  <div class="gray-bar"></div>
  <div class="cyan-bar"></div>
  <div class="purple-bar"></div>
</div>

However, when I resize my window, at some point of time, the "cyan" triangle is causing issue because of the margins and the rotation. Therefore, I added some media queries to modify the rotation angle depending on the width of the screen but I feel that it's a bit "playing around" and that there is a better solution to achieve this.

I tried using borders to make the overlapping triangles but as it cannot be expressed as percentage, I'm a bit stuck. Indeed, the goal is that the result looks about the same whatever the user's screen resolution.

Is there a better solution than mine ?

Upvotes: 1

Views: 143

Answers (2)

web-tiki
web-tiki

Reputation: 103810

Considering that the .top element uses the full viewport width, you can use viewport percentage units for the borders. This will make the triangles relative to the viewport width.
See this example with one div :

body,html{margin:0;padding:0;}

.topBar{
  position:relative;
  height:35px;
  border-bottom:30px solid transparent;
  border-right:100vw solid #B71E4C;   
}
.topBar:before, .topBar:after{
  content:'';
  position:absolute;
  top:0; left:0;
  height:15px;
}
.topBar:before{
  border-bottom:50px solid transparent;
  border-left:100vw solid #2CA1AB;
}
.topBar:after{
  border-bottom:40px solid transparent;
  border-right:100vw solid #CDCBCC;   
}
<div class="topBar"></div>

Upvotes: 5

Ferrmolina
Ferrmolina

Reputation: 2771

Maybe this help you, but, @web-tiki its the best solution, using pseudo-selectors: :before & :after 

.top {
  overflow: hidden;
  height: 90px;
}
.top .gray-bar {
    position: relative;
    width: 100%;
    height: 50px;
    background-color:#cdcbcc;
    -ms-transform: rotate(1.3deg);
    transform: rotate(1.3deg);
    margin-top:-35px;
    z-index: 2;
}

.top .cyan-bar {
    position: relative;
    width: 150%;
    height: 50px;
    background-color:#2ca1ab;  
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
    z-index:1;
    top: -5px;
    margin-top:-30px;
    margin-left:-100px;
}

.top .purple-bar {
    position: relative;
    width: 100%;
    height: 20px;
    background-color:#b71e4c;   
    -ms-transform: rotate(0.7deg);
    transform: rotate(0.7deg);
    margin-top: -20px;
    z-index:0;
}
<div class="top">
    <div class="gray-bar"></div>
    <div class="cyan-bar"></div>
    <div class="purple-bar"></div>
</div>

Upvotes: 0

Related Questions