CSS3边框半径和更大的圆角DIV在DIV

-2

enter image description here CSS3边框半径和更大的圆角DIV在DIV

我想使这个exapmle在CSS3和HTML5的股利。

thanx所有！

2015-04-05 zolyyy

你试过了什么 – vals 2015-04-05 19:13:58

其实我不应该回答这个问题。当你困在你的代码中时，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

<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

CSS3边框半径和更大的圆角DIV在DIV

回答

相关问题