使用CSS創建自定義形狀

我正在嘗試使用CSS創建自定義形狀，但是我無法完全創建我想要實現的形狀。形狀將代表其在此處顯示在主導航選擇的項目：使用CSS創建自定義形狀

正如你可以看到我已經風格元素<a class="selected">與顯示具有相似的外觀，藥丸形狀的CSS屬性border-radius: 40px 40px 40px 40px;。

但是我想要實現的是一個形狀，有直的頂部和底部的邊緣，但有左右兩邊圓形如下圖所示：是否有任何CSS屬性我可以申請實現這一目標？

enter image description here

來源

2013-04-11 user1554264

如果您想設法使這個在CSS中，我會向你們致敬。不過，我認爲它需要CSS3，所以IE8和更低版本會對此產生不滿。我只會使用圖像。 – 2013-04-11 13:16:39

看起來像一個圓形，並且包含div的溢出設置爲隱藏。 – thgaskell 2013-04-11 13:17:29

看看下面的CSS：

div{ 
    border-radius: 10px/100%; 
}

這個鮮爲人知的斜槓符號使您可以使用橢圓形邊框半徑爲你可以在MDN border-radius Doc的圖像中看到。

隨着斜槓記號可以定義垂直和水平邊界半徑是這樣的：

border-radius: [up to 4 horizontal values]/[up to four vertical values];

這意味着可以單獨地限定具有不同半徑的橢圓爲每個角（以下定義的多個值的一般規則）：

/*   horizontal values | vertical values */ 
    /*    ↓ top-left  | ↓ top-left  */ 
    border-radius: 5px 6px 7px 8px/10px 11px 12px 13px; 
    /*    bottom-right ↑ | bottom-right ↑ */

如果您足夠強烈地扭曲橢圓，您可以達到您的情況所需的效果。

div{ 
 
    background:#bada55; 
 
    color:white; 
 
    font-size:30px; 
 
    font-family:arial, sans-serif; 
 
    padding:10px 20px; 
 
    display:inline-block; 
 
    margin:10px; 
 
    border-radius: 10px/90%; 
 
    text-shadow:1px 1px 1px #792; 
 
    box-shadow:inset 1px 1px 1px rgba(70,90,10,.3); 
 
}

<div>sponsorship</div>

JSFiddle

來源

2013-04-11 13:30:11 Christoph

css的聖母... +1 – 2013-04-11 13:32:38

+1＃bada55！ – thgaskell 2013-04-11 13:34:04

我可以問第二個值的斜線符號是什麼定義？我知道第一個值是定義圓的半徑，但是什麼是/和100％在做什麼？ – user1554264 2013-04-11 13:51:05

可以在CSS3做到這一點。此鏈接包含各種形狀，您可以使用http://css-tricks.com/examples/ShapesOfCSS/。我認爲你會想使用類似「電視屏幕」的東西

#tv { 
    position: relative; 
    width: 200px; 
    height: 150px; 
    margin: 20px 0; 
    background: red; 
    border-radius: 50%/10%; 
    color: white; 
    text-align: center; 
    text-indent: .1em; 
} 
#tv:before { 
    content: ''; 
    position: absolute; 
    top: 10%; 
    bottom: 10%; 
    right: -5%; 
    left: -5%; 
    background: inherit; 
    border-radius: 5%/50%; 
}

來源

2013-04-11 13:17:52 Schleis

我的回答中沒有看到鏈接。 – 2013-04-11 13:19:31

我可以請你加入你提到的鏈接嗎？ – user1554264 2013-04-11 13:19:35

添加了我粘貼在我腦海中的鏈接。 – Schleis 2013-04-11 13:26:12

使用CSS創建自定義形狀

回答

相關問題