CSS边框边缘（一侧半径另一侧边缘）答案

【问题标题】：CSS border Edge (one side radius other side edge)CSS边框边缘（一侧半径另一侧边缘）
【发布时间】：2016-10-27 12:17:30
【问题描述】：

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

但是，我被卡住了。试图用边界来做。估计也失败了。左上角的图标是图片，其余的应该是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;
}

帮助图像中的红色部分会很棒。泰。

【问题讨论】：

请在问题中实际发布您的相关代码
你能帮我看看我应该添加哪部分代码吗？
主要只是你想要帮助的部分，甚至只是简单的重新制作你想要效果的区域。
另外，我高度怀疑您是否会通过 CSS 获得所需的答案，我建议您使用图像。电子邮件客户端因其在渲染方面的差异而臭名昭著，并且可能不支持 CSS 转换
@NTahaE 这个 HTML 是用于邮寄的吗？

标签： html css html-email

【解决方案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;    
}

【讨论】：

您好@Alan thx 对于您的回答，它对锋利的边缘有很大帮助，但我仍然对如何在外面弯曲边框感到困惑。
将边框向外弯曲是不可能的，我经常认为它会很有用。要获得该效果，请在红色元素上使用 position: relative, z-index: 1 和 position: relative, z-index: 0 或 -1 将粉色元素放置在红色元素的顶部。您还需要在粉色元素上设置border-radius: 45px 和border: 5px solid #fff。