Debo crear esta forma con css solamente, he intentado crear la imagen directamente con css, al principio modifique el border-radius pensando que esto podría crear el efecto del medio
border-radius: 170%;
Pero eso no funciono me creaba la siguiente forma
entonces solo lo redondee, he intente con after y before, pero resulta que tampoco funciona, existe o conocen una forma de hacerlo con css únicamente
Para volver la pregunta mas clara, agregare lo que he probado.
/Div central (el que tiene el borde azul y se espera que sea como la forma de muestra)/
#U2L5ParagraphQuestion
{
position: relative;
padding: 3%;
font-size: 1.3vw;
border-radius: 11vw;
font-family: Lato-ligth;
border: 4px solid #2b3098;
box-shadow: 4px 3px 18px 0px rgba(0,0,0,0.6);
}
#U2L5ParagraphQuestion:after
{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid white;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
#U2L5ParagraphQuestion:before
{
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid red;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
Como pueden apreciar, estoy utilizando componentes before y after para tratar de crear la forma, aún no se da.