具有边框半径和三角形边的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 Demo

---

<强>更新

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