css border with triangle shape

Question

Is there any way to create the border on the left with css ?

Answer 1

Here is a way to do it using CSS; you are just layering a Parallelogram and a Rectangle:

.espanolIcon
{
    width: 300px;
    height: 100px;
    padding-left: 30px;
}
.rectangle {
    position: absolute;
    top: 0px;
    left: 200px;
    width: 200px;
    height: 100px;
    background-color: green; 
    border-radius: 0px 0px 30px 40px;
}

.arrow-left {
    position: absolute;
    top: 0px;
    width: 300px;
    height: 100px;
    background-color: green;
    -webkit-transform: skew(22deg); 
    transform: skew(22deg); 
    border-radius: 0px 0px 30px 40px;
    
}

h1 {
    color: white;
}

<div class="espanolIcon">
    <div class="rectangle"><h1>Espanol</h1></div>
    <div class="arrow-left"></div>
    
    
</div>