Как сделать такую же фигуру, как желтая на картинке, используя css?
2 ответа
Можно вот как-то так поиграться свойством clip-path, размерами и отступами.
.yellow {
background: yellow;
clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);
width: 50%;
height: 100px;
}
.goldenrod {
background: goldenrod;
clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%);
margin-left: 45%;
width: 10%;
height: 50px;
}
.blue {
background: blue;
margin-top: -50px;
height: 120px;
position: relative;
z-index: -1;
}
<div class="yellow"></div>
<div class="blue">
<div class="goldenrod"></div>
</div>
Ещё один вариант..
body {
background: black;
}
#box {
margin: 0 auto;
width: 250px;
height: 180px;
border-radius: 5px;
background: #ffff;
position: relative;
overflow: hidden;
}
#text {
width: 100%;
height: 33%;
color: #283E9F;
position: absolute;
left: 35%;
top: 12%;
font-size: 25px;
font-weight: bolder;
}
#spn {
position: absolute;
left: -5%;
top: 50%;
color: #C0737D;
font-size: 12px;
font-weight: lighter;
}
#lable {
width: 15%;
height: 33%;
background: #C19C03;
position: absolute;
left: 8%;
top: 10%;
transform: perspective(50px) rotateX(-25deg);
border-radius: 0px 0px 20px 20px;
}
#yellow {
width: 50%;
height: 20%;
background: #FCCD05;
position: absolute;
bottom: 25%;
left: -6%;
transform: skew(25deg);
z-index: 3;
}
#orange {
left: 41.5%;
position: absolute;
width: 7%;
height: 10%;
background: #C19C03;
bottom: 25.1%;
z-index: 2;
transform: skew(-15deg);
}
#blue {
width: 100%;
height: 35%;
background: #4F61B7;
position: absolute;
bottom: 0;
z-index: 1;
}
<div id='box'>
<div id='lable'></div>
<div id='text'>ВГУ<span id='spn'>Semper in motu</span></div>
<div id='yellow'></div>
<div id='orange'></div>
<div id='blue'></div>
</div>