Triangel Transparent

by Long Nguyễn Hoàng

HTML

<div class="slide">
  <div class="bg_white"></div>
  
</div>

CSS

.bg_white{    bottom: 0;
    height: 25px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 100;
 }
 .bg_white::before{border: 25px solid transparent;
    border-top: none;
    border-color: rgb(234, 236, 240);
    bottom: 0;
    box-sizing: border-box;
    height: 0;
    position: absolute;
    width: 50%;
    content:'';
    border-right-color: transparent!important;
    left: 0;}
    
.bg_white::after{    border: 25px solid transparent;
    border-color: #000;
    border-top: none;
    bottom: 0;
    box-sizing: border-box;
    height: 0;
    position: absolute;
    width: 50%;
    border-left-color: transparent!important;
    right: 0;content:''}
 
.slide{background:url('https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg') no-repeat center;height:300px;position:relative;}