如何编码某些CSS形状？

Question

我正在尝试在CSS中创建下面的形状。任何想法如何做到这一点？或者知道可以提供帮助的教程网站？我说的是黄色形状的标签。

其次，有没有人知道如何用css制作一个形状为正方形/矩形的形状，底部有两个圆角但顶部有直角？

谢谢！

詹姆斯

Answer 1

首先回答第二个问题，使用border-radius

div{
    border:1px solid black;
    border-radius:0 0 4px 4px;
    -moz-border-radius:0 0 4px 4px;
    -webkit-border-radius:0 0 4px 4px;
    height:100px;
    width:100px;
    margin:2em;
}

-moz和-webkit是特定的供应商前缀。

您可以根据需要更改数字，但它们遵循此模式

第1＃=左上角
第二个＃=右上角
第3＃=右下角
第4＃=左下角

示例：http://jsfiddle.net/9VbFn/

关于第一个问题，这是一个帮助您的教程

http://debiprasad.net/coding-and-logic/create-a-price-tag-using-css

Answer 2

是;你可以用纯CSS＆amp; gradient也是。

选中此http://jsfiddle.net/9EEEP/3/

带边框＆amp;圈http://jsfiddle.net/9EEEP/2/

您可以根据您的要求调整css，例如http://jsfiddle.net/9EEEP/5/

Answer 3

问题的第二部分很简单：border-radius: 0 0 5px 5px，只需用你想要的任何值替换5s。第一部分尽管在技术上可以使用CSS，但使用背景图像可以更好地实现。

编辑：这是CSS中标签的粗略版本，如果您真的想试一试，可以帮助您入门。 http://jsfiddle.net/hsuF3/

Answer 4

查看使用:before和:after以及CSS3变换影响的标记（旋转psuedo类之前和之后）。不过，最好使用背景图片。

要回答您的第二个问题 - 您可以使用border-radius轻松实现此效果。 e.g。

p {
    -moz-border-radius: 0 0 2px 2px;
    -webkit-border-radius: 0 0 2px 2px;
    border-radius: 0 0 2px 2px;
}

值从左上角到左下角顺时针。

Answer 5

首先，如果您想要该图像，则必须下载并将其添加到您的解决方案中。一旦你有了它，你可以将它连接到你的链接或按钮或任何你想要使用的控件。我使用了一个按钮，所以我创建了以下样式类并应用它。

.btnLarge_blue { background：url（“../ images / btn_Large_blue.gif”）; 宽度：68px;高度：20像素;字体：12px Calibri;光标：指针;边框：0像素;填充：0像素;}

...

希望这会有所帮助：）