CSS border 边缘（一侧半径另一侧边缘）

Question

我试图让我的电子邮件页面看起来像这样：

但是，我卡住了。试图用边框来做。估计也失败了。左上角的图标是一张图片，其余应该是css和html。我只做到了这一点：https://jsfiddle.net/ru9L8c56/4/

CSS代码：

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

帮助处理图像中的红色部分会很棒。 TY.

Answer 1

创建您想要的形状需要的不仅仅是边框半径，您可以针对 div 的特定角以使用以下语法创建曲线：

border-radius: 45px 0 0 0;

或

border-radius: 0 45px 0 45px;

等每个数字定义一个不同的角。

要添加斜角，您需要向 div/td 添加一个 :after 元素，大致如下：

 div:after{
     content: "";
     position: absolute;
     border-left: 45px solid transparent;
     border-bottom: 45px solid transparent;
     border-right: 45px solid red;    
}

CSS border 边缘（一侧半径另一侧边缘）

CSS border Edge (one side radius other side edge)

html

css

html-email