CSS border Edge (one side radius other side edge) - html

Question

I was trying to get this look for my email page:
However, I am stuck. Tried to do it with border. I guess it failed too. The icon on the upper left side is an image, rest should be css and html. I only managed to get this far: https://jsfiddle.net/ru9L8c56/4/
CSS code:
/*////// FRAMEWORK STYLES //////*/
.flexibleContainerCell {
padding: 10px;
}
.flexibleImage {
height: auto;
}
.bottomShim {
padding-bottom: 20px;
}
.imageContent,
.imageContentLast {
padding-bottom: 20px;
}
.nestedContainerCell {
padding-top: 20px;
padding-Right: 20px;
padding-Left: 20px;
}
/*////// GENERAL STYLES //////*/
body,
#bodyTable {
background-color: #F5F5F5;
}
#bodyCell {
padding-top: 40px;
padding-bottom: 40px;
}
#emailBody {
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
border-collapse: separate;
border-radius: 4px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #202020;
font-family: PT Sans;
font-size: 20px;
line-height: 125%;
text-align: Left;
}
p {
color: #202020;
font-family: Verdana;
font-size: 12px;
line-height: 130%;
text-align: Left;
}
.textContent,
.textContentLast {
color: #404040;
font-family: Helvetica;
font-size: 16px;
line-height: 125%;
text-align: Left;
padding-bottom: 20px;
}
.textContent a,
.textContentLast a {
color: #2C9AB7;
text-decoration: underline;
}
.nestedContainer {
background-color: #E5E5E5;
border: 1px solid #CCCCCC;
}
.emailButton {
background-color: #2C9AB7;
border-collapse: separate;
border-radius: 4px;
}
.buttonContent {
color: #FFFFFF;
font-family: Helvetica;
font-size: 18px;
font-weight: bold;
line-height: 100%;
padding: 15px;
text-align: center;
}
.buttonContent a {
color: #FFFFFF;
display: block;
text-decoration: none;
}
.emailCalendar {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
}
.emailCalendarMonth {
background-color: #2C9AB7;
color: #FFFFFF;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: bold;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
.emailCalendarDay {
color: #2C9AB7;
font-family: Helvetica, Arial, sans-serif;
font-size: 60px;
font-weight: bold;
line-height: 100%;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
}
Help with the red parts in the image would be awesome. TY.

Answer 1

Creating the shape you want will take more than just border-radius, you can target specific corners of the div to have curves with this syntax:
border-radius: 45px 0 0 0;
or
border-radius: 0 45px 0 45px;
etc.
each number defines a different corner.
To add the slanted corners you'll need to add an :after element to the div/td, something along the lines of this:
div:after{
content: "";
position: absolute;
border-left: 45px solid transparent;
border-bottom: 45px solid transparent;
border-right: 45px solid red;
}