1. 首頁
  2. 問答
  3. CSS3邊框半徑和更大的圓角DIV在DIV

CSS3邊框半徑和更大的圓角DIV在DIV

2015-04-05 180 views

回答

1

其實我不應該回答這個問題。當你困在你的代碼中時，SO是爲了幫助你，而不是讓別人爲你寫代碼。但是，嘿，這是復活節，並且因爲它是那麼容易......

div { 
    background: black; 
    width: 250px; 
    height: 250px; 
    border-radius: 50%; 
    margin-left: 150px; 
    position: relative; 
} 
div:before { 
    content: ''; 
    position: absolute; 
    left: -150px; 
    top: 50px; 
    bottom: 50px; 
    right: -75px; 
    background: red; 
    border-top-left-radius: 40px 75px; 
    border-bottom-left-radius: 40px 75px; 
    z-index: -1; 
}

和演示：http://jsfiddle.net/o004hrqz/

讓我知道如果你要我解釋什麼。

來源

2015-04-05 17:37:57 Pevara

0 
<html> 
<head> 

    <style type="text/css"> 
    .div1 { 
    width: 250px; 
    height: 60px; 
    margin-top: 50px; 
    background-color: #F00; 
    position: relative; 
    border-top-left-radius: 40px 75px; 
    border-bottom-left-radius: 40px 75px; 
    } 
    .div2 { 
    width: 100px; 
    height: 100px; 
    background-color: #000; 
    border-radius: 50%; 
    position: absolute; 
    left: 40px; 
    top: -20px; 
    } 
    </style> 

</head> 

<body> 

<div class="div1"> 
    <div class="div2"> 
    </div> 
</div> 

</body> 
</html>

來源

2015-04-05 17:46:44 Shimakuro

相關問題

 相關問題