如何建立这种形状只的div和css

如何建立这种形状只的div和css

我有这样的形状，我想用CSS创建它，这样我可以动态地改变填充颜色的PNG。

我的问题是：如何仅使用div s和CSS最有效地重现此图像？

请注意，橙色填充物周围有5px的白色笔划。该笔画也需要创建。右侧曲线右侧的区域需要透明。您的CSS无法使用背景图像等外部资产。

理想情况下，CSS可以在包括IE 7,8和9在内的大多数浏览器中工作。但这并非绝对必要。

向前看看CSS向导并向我展示您最黑暗最脏的CSS秘密。无论何时您提交答案，我都会在网站允许的情况下立即给予50美元的奖励，并将完全授予最佳答案。

让我们来看看你有什么。

来源

2012-11-17 Rafe

尝试看看SVG和路径：http://www.w3schools.com/svg/svg_path.asp –

@Alex Peta请不要链接到网站：http：//w3fools.com/ –

@Alex Peta在这种情况下不需要 – jacktheripper

只是把正确的颜色，最终改变尺寸

#shape { 
    width: 200px; 
    height: 150px; 
    background: orange; 
    border: 5px solid white; 
    border-radius: 15%/50%; 
    border-top-left-radius: 5px; 
    border-bottom-left-radius: 5px; 
}

来源

2012-11-17 15:59:59 vlcekmi3

'位置“，”边距“，”文本对齐“，”文本缩进“和”颜色“根本不影响形状。 '边框颜色'会很好添加。 –

这个版本也与IE9兼容...

HTML

<meta http-equiv="X-UA-Compatible" content="IE=9" /> 
<div id="image"> 
</div>

CSS：

#image{ 
background:orange; 
border: 5px solid white; 
-moz-border-radius: 20%/60%; 
-webkit-border-radius: 20%/60%; 
border-radius: 20%/60%; 
-moz-border-top-left-radius: 0px; 
-moz-border-bottom-left-radius: 0px; 
-webkit-border-top-left-radius: 0px; 
-webkit-border-bottom-left-radius: 0px; 
border-top-left-radius: 0px; 
border-bottom-left-radius: 0px; 
height:100px; 
width:150px; 
}

来源

2012-11-17 16:03:01 Savi

HTML

<div id="css"></div>

CSS

#css { 
    width: 118px; 
    height: 74px; 
    margin: 20px 20px; 
    background: red; 
    border: 6px solid white; 
    border-radius: 20%/62%; 
    border-top-left-radius: 6px; 
    border-bottom-left-radius: 6px; 
}

Live example

我敢说你猜哪一个是不看HTML）

来源

2012-11-17 16:10:35 jacktheripper

+1，因为你是第一个解决关于它周围的5px白色笔划的笔记。 – ScottS

非常接近。我在FF的弧线两端得到了一点黑色。 – Rafe

@ Rafe - 似乎部分基于选择的数字。如果我为我改变'18％'为'20％'，Firefox会使它更好，所以它可能是为您的应用选择恰当数量的一个因素。 – ScottS

如何建立这种形状只的div和css

回答

相关问题