Html 我可以给一个div加一个圆形的右边吗？_Html_Css

Html 我可以给一个div加一个圆形的右边吗？

html css

Html 我可以给一个div加一个圆形的右边吗？,html,css,Html,Css,我有一种情况，我希望能够给一个div的右边一个小圆圈。有没有CSS魔法可以实现这一点？如果是，请演示如何使用此小提琴模板： 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>

我有一种情况，我希望能够给一个div的右边一个小圆圈。有没有CSS魔法可以实现这一点？如果是，请演示如何使用此小提琴模板：

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>

您只是缺少边界半径：

其中边界半径格式为（在本例中）：左上右上右下右下左

下面的代码应该可以解决您的问题

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


div
{
边框：2px实心#A1A1；
填充：10px 40px；
背景：#dddddd；
宽度：300px；
边框右上半径：2米；
边框右下半径：2米；
-webkit边框右上半径：2米；
-webkit边框右下半径：2米；
-moz边框右上半径：2米；
-moz边框右下半径：2米；
}
“边界半径”属性允许您向图元添加圆角。

要获得所需的半圆，您需要利用。关键是使用

边界半径

，使用相等且非常大的值（参见您的小提琴叉子）：

div.rounded-side{
背景颜色：黄色；
填充：10px；
边界半径：0 100em 100em 0；
}
div.rounded-side>p{font-size:24px；}


默认情况下，此div的形状为矩形。
如果可能的话，我希望它的右边是圆形的

看看这个更好的来源：像这样？哎呀。我的行动不清楚。我希望整个右侧是一个半圆。注意，最好是。就我个人而言，我已经停止在边框半径中使用前缀，对于较旧的浏览器来说“太糟糕了”。@JohnSkeet的朋友re:a semi circle-我发现这是一篇很有帮助的文章。@StephenP你应该回答这个问题。我相信这正是OP想要的。@iamnotmaynard这篇文章的重点是50%的人可以做奇怪的事情。它（50%）对圆很有用，但如果您在上面的

jsfiddle.net/z2hejemu/7

中将

110px

更改为

50%

，则会得到一个椭圆形的右侧，而不是半圆。这篇文章内容丰富，但不是答案（IMHO）

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

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

<!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>