Как сделать эффект такого треуголника в секции?

121

23 октября 2019, 18:30

Answer 1

К примеру так, естественно размеры определите для себя сами.

* { 
  margin: 0; 
  padding: 0; 
} 
 
div { 
  background-color: #f3f3f3; 
  width: 100%; 
  height: 100px; 
  position: relative; 
} 
 
.with_triangle::before { 
  content: ''; 
  width: 20px; 
  height: 20px; 
  background-color: inherit; 
  position: absolute; 
  bottom: -10px; 
  left: 50%; 
  transform: translateX(-50%) rotate(45deg); 
  z-index: -1 
}

<div class="with_triangle"></div>

А вот вариант от Сырка на бордерах, мне нравится меньше, т.к. цвет нужно задавать руками и этому объекту

* { 
  margin: 0; 
  padding: 0; 
} 
 
div { 
  background-color: skyblue; 
  width: 100%; 
  height: 100px; 
  position: relative; 
} 
 
.with_triangle::before { 
  content: ''; 
  position: absolute; 
  bottom: -20px; 
  left: 50%; 
  transform: translateX(-50%); 
  border: 10px solid transparent; 
  border-top: 10px solid skyblue; 
}