0

Пример картинки

Как сделать такую же фигуру, как желтая на картинке, используя css?

2
  • мне кажется, тут лучше svg заиспользовать
    – mymedia
    14 сен 2022 в 20:43
  • я понимаю( но это задание в вузе 14 сен 2022 в 20:45

2 ответа 2

4

Можно вот как-то так поиграться свойством 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>

посмотерть результат

0

Ещё один вариант..

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.