NTahaE NTahaE - 1 month ago 6
CSS Question

CSS border Edge (one side radius other side edge)

The look i want to get

Hello, i was trying to get this look for my email page but i am puzzled. Tried to do it with border. I guess it failed too. The icon on the upperleft side is an image, rest should be css and html. I only managed to got this far: https://jsfiddle.net/ru9L8c56/4/

/*////// 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

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;    
}
Comments