具有边框半径和三角形边的CSS项

Ole*_*sko 5 css css3 css-shapes

在css(没有图像)中是否可以制作边框半径和三角形边的项目?

李物品

met*_*ion 4

您可以使用 SVG 图像,它可以在任何尺寸下清晰渲染并适应元素的尺寸,它看起来像这样......

\n\n
.button {\n  background: #000;\n  float: left;\n  position: relative;\n  color: #999;\n  font: 15px/130% Arial, sans-serif;\n  padding: 10px 20px;\n  clear: both;\n  margin: 10px;\n  border-radius: 5px 0 0 5px;\n}\n\n.button:after {\n  content: \'\';\n  display: block;\n  width: 10px;\n  position: absolute;\n  right: -10px;\n  height: 100%;\n  top: 0;\n  background: transparent url(\'triangle.svg\') 0 0 no-repeat;\n}\n
Run Code Online (Sandbox Code Playgroud)\n\n

http://jsfiddle.net/Ch7aA/

\n\n

\xe2\x80\x8b这个 jsfiddle 只能在 Webkit 中工作,因为我已经内联了 svg,这样你就可以理解它是如何工作的,但是如果你从外部文件加载它,它应该可以正常工作。以下是效果图供参考:

\n\n

在此输入图像描述

\n