Question

我有一种情况，我希望能够在div的右侧轻微一轮。是否有任何CSS巫师可以实现这一目标？如果是这样，请演示使用此小提琴模板：http://jsfiddle.net/z2hejemu/

HTML

<div class="rounded-side">
    <p>This div is by default rectangular in shape. I'd like the right side of it to be rounded, if that's possible. </p>  
</div>

CSS

div.rounded-side {background-color:yellow;padding:10px;}

div.rounded-side > p {font-size: 36px;}

Answer 1

您只是缺少border-radius： http://jsfiddle.net/z2hejemu/3/

div.rounded-side {
    background-color:yellow;
    padding:10px; 
    -webkit-border-radius: 0 10px 10px 0;
    border-radius: 0 10px 10px 0;
}

其中border-radius格式是（在这种情况下）：左上角右上角右下左下角

Answer 2

要获得您正在寻找的半圆，您需要利用the spec规定的缩放要求。关键是要使用border-radius使用相等且非常大的值（请参阅你的小提琴http://jsfiddle.net/gLsd2z4L/）：

＆＃13;

div.rounded-side {
    background-color:yellow;
    padding:10px;
    border-radius: 0 100em 100em 0;
}

div.rounded-side > p {font-size: 24px;}

＆＃13;

<div class="rounded-side">
    <p>This div is by default rectangular in shape.
       I'd like the right side of it to be rounded, if that's possible. </p>  
</div>

＆＃13;

这可行，因为as described in the spec：

拐角曲线不得重叠：当任意两个相邻边界半径的总和超过边框的大小时，UAs必须按比例减少所有边界半径的使用值，直到它们都不重叠。

在这个例子中，半径的总和是200em;假设元素的高度（或宽度，以较小者为准）小于此总数，则半径将按比例缩小。由于我们为半径选择相等的值，它们将继续相等，只是减少。选择非常大的值（即元素框永远不会接近的大小）会强制浏览器进行缩放。

在Stephen P在另一个答案的评论中发布的链接"The curious case of border-radius:50%"中，他们建议使用值9999px;我使用100em只是因为它对我来说看起来更干净。除非某些价值/单位的性能成本高于其他值（非常值得怀疑），否则不管你使用什么都不重要，只要半径相等且总数大于元素数量即可。大小。

Answer 3

以下代码可以解决您的问题。

div.rounded-side {
    border-radius:0 20px 20px 0;
}

Answer 4

<!DOCTYPE html>
<html>
<head>
<style> 

div 
{
border: 2px solid #a1a1a1;
padding: 10px 40px; 
background: #dddddd;
width: 300px;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
-webkit-border-top-right-radius: 2em;
-webkit-border-bottom-right-radius: 2em;
-moz-border-top-right-radius: 2em;
-moz-border-bottom-right-radius: 2em;
}

</style>
</head>
<body>

<div>The border-radius property allows you to add rounded corners to elements.</div>

</body>
</html>

我有可能给div一个圆形右侧吗？

4 个答案: