CSS边界边(一边半径另一边)

时间:2016-10-27 12:17:30

标签: html css html-email

The look i want to get

您好,我试图查看我的电子邮件页面,但我感到困惑。试图用边框做。我猜它也失败了。左上方的图标是图像,休息应该是css和html。我只能做到这一点: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;}

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

1 个答案:

答案 0 :(得分:1)

创建所需的形状将不仅仅是border-radius,您可以将div的特定角定位到具有以下语法的曲线:

UpdateSourceTrigger=PropertyChanged

border-radius: 45px 0 0 0;

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

要添加倾斜的角落,您需要将一个:after元素添加到div / td,这就是:

border-radius: 0 45px 0 45px;