0

I have a div which has a arrow head on it's left side. Something similar to the following image.

enter image description here

As you can see the point of this arrow is not curved and i need it to have a certain border-radius. But adding a border-radius did not make the point curve. How can i curve the point of this div?

html

<div className="block3 ml-4 pl-2">
   <Row noGutters md={12} style={{ height: '55px' }}>
       <Col md={1} xs={2} className="d-flex justify-content-center">
            <Image src={Warning} className="vertical_center" />
        </Col>
        <Col md={11} lg={11} xs={10} className="pl-2">
            <label className="mr-auto modal_body_text vertical_center" style={{ color: 'white' }}>
                  Point needed to be curved
             </label>
         </Col>
   </Row>
</div>

css

.block3 {
    background: #1498C5;
    box-shadow: 0px 8px 32px rgba(20, 152, 197, 0.2);
    backdrop-filter: blur(10.8731px);
    border-radius: 6px;
    // padding: 20px;
    position: relative;
    color: #fff;
    // margin-left: 0 !important;
    max-width: 100%;
    min-height: 45px;
    height: auto;
    margin: 0 auto;
}

.block3:after {
    content: ''; 
    position: absolute;  left: -30px; top: 50%;
    border: 15px solid transparent; 
    border-right: 20px solid #1498C5; 
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    transform: translate(0,-50%);
  }
CraZyDroiD
  • 6,622
  • 30
  • 95
  • 182

0 Answers0