Блог

Как вы добиваетесь такого рода вещей в нижней части div в CSS?

Я пытаюсь

  amp;:before {
  content: '';
  position: absolute;
  z-index: 2;
  width: 133.93px;
  height: 93.63px;
  border-radius: 5px;
  border: 1px solid #ffffff;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.2);
  background-image: $gradeint;
  text-align: center;
  transform-origin: center;
  transform: rotateZ(45deg);
  top: -10%;
  right: 0;
}
 

но это не то, чего я хочу

Вы можете добиться чего-то вроде формы, используя clip-path свойство. Вот пример.

Фиолетовая область фактически покрывает весь контейнер, но clip-path набор на ней обрезает его до многоугольника, определенного точками 0 0, 100% 0, 35% 60%, 0 0 , где 0, 0 находится верхний левый угол контейнера и 100%, 100% будет нижним правым углом.

 .container {
  width: 300px;
  height: 200px;
  border: 1px solid black;
  position: relative;
  display: flex;
}

.accent {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: purple;
  clip-path: polygon(0 0, 100% 0, 35% 60%, 0 0);
}

.image {
  width: 125px;
  height: 125px;
  background-color: lightgray;
  border-radius: 125px;
  margin: auto;
  z-index: 1;
} 

 <div class="container">
  <div class="accent"></div>
  <div class="image"></div>
</div>