I have a div which has a arrow head on it's left side. Something similar to the following image.
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%);
}