CSS邊框邊緣（一側半徑另一側緣）

-2

The look i want to get CSS邊框邊緣（一側半徑另一側緣）

你好，我是試圖讓這一下我的電子郵件頁面，但我很疑惑。試圖用邊框來做。我猜它也失敗了。左上角的圖標是一個圖像，其餘的應該是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。

來源

2016-10-27 NTahaE

請在實際的問題發表您的相關代碼 –

你能請幫我瞭解我應該添加哪部分代碼？ – NTahaE

主要只是你想要幫助的部分，或者甚至只是簡單地重新制作你想要的效果區域。 –

創建你想將不僅僅是邊界半徑更多的形狀，你可以針對股利的具體角落，有這樣的語法曲線：

border-radius: 45px 0 0 0;

或

border-radius: 0 45px 0 45px;

等。每個號碼定義一個不同的角落。

要添加的傾斜角，你需要添加一個：沿着該線元素之後到div/TD，東西：

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

來源

2016-10-27 13:19:52 Pixelomo

你好@Alan thx爲你的答案，它幫助了很多鋒利的邊緣，但我仍然對如何彎曲外部邊界感到困惑。 – NTahaE

彎曲外面的邊界是不可能的，我經常認爲它會很有用。爲了得到這種效果，在紅色元素上使用'position：relative，z-index：1'和'position：relative，z-index：0'或-1來將紅色元素放置在紅色元素的頂部。你還需要在pink元素上使用border-radius：45px和border：5px solid #fff。 – Pixelomo

CSS邊框邊緣（一側半徑另一側緣）

回答

相關問題