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

Question

是否可以在 css（没有图像）中制作具有边框半径和三角形边的项目？

Answer 1

你可以使用一个 SVG 图像，它可以在任何尺寸下清晰呈现，并适应元素的尺寸，它看起来像这样......

.button {
  background: #000;
  float: left;
  position: relative;
  color: #999;
  font: 15px/130% Arial, sans-serif;
  padding: 10px 20px;
  clear: both;
  margin: 10px;
  border-radius: 5px 0 0 5px;
}

.button:after {
  content: '';
  display: block;
  width: 10px;
  position: absolute;
  right: -10px;
  height: 100%;
  top: 0;
  background: transparent url('triangle.svg') 0 0 no-repeat;
}

http://jsfiddle.net/Ch7aA/

这个 jsfiddle 只能在 Webkit 中工作，因为我已经内联了 svg，所以你可以理解它是如何工作的，但是如果你从外部文件加载它应该可以正常工作。以下是渲染图供参考：

Answer 2

看看这个： http ://css-tricks.com/snippets/css/css-triangle/ 或者这个：http: //jonrohan.me/guide/css/creating-triangles-in-css/

对于动态高度，这里有个问答：CSS triangle with dynamic height

Answer 3

HTML：

<div><span>fubar</span></div>

CSS：

span{
    display:block;
    width:100px;
    float:left;
    background-color:green;
    text-align:center;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding:5px 0;
}
div:after {
    content: "";
    display:block;
    float:left;
    border-top: 15px solid transparent;
    border-bottom:15px solid transparent;   
    border-left: 10px solid green;
}

jsFiddle 演示

---

更新：

为了能够处理不同的高度，您将需要编写一些 JavaScript 代码来动态更改边框大小或使用 CSS 截断文本。不过，这取决于您的特定要求。