Search code examples
htmlcsshtml-email

CSS border Edge (one side radius other side edge)

I was trying to get this look for my email page:

the look I was trying to get

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.

Solution

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