CSS物品的边框半径和三角形边缘

Question

在没有图片的情况下，是否可能在CSS中制作带有圆角和三角边的项目？

- Oleg Pasko

---

是的，但它不支持旧版的IE。这会成为问题吗？ - zzzzBov

可能更容易使用每个（缺乏更好术语）元素的两个部分来完成。一个用于具有圆角的较大左手部分，另一个用于三角形。 - j08691

不需要IE支持 :) 如果没有指定高度，那么创建三角形该怎么做呢？可以使用其他元素吗？ - Oleg Pasko

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 内联了，以便您可以理解它是如何工作的，但如果您从外部文件加载它，则应该可以正常工作。这是参考渲染结果：

- methodofaction

Answer 2

请看这个： http://css-tricks.com/snippets/css/css-triangle/ 或者这个：http://jonrohan.me/guide/css/creating-triangles-in-css/ 对于动态高度，这里有一个问题和答案：CSS triangle with dynamic height

- Kristóf Dombi

---

这是一个很棒的解决方案，但我有一个问题：如何在没有指定高度的情况下创建三角形？一个li项目可以在一行中，另一个则可能需要两行... - Oleg Pasko

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截断文本。不过，这取决于您的具体要求。

- Alex

---

无法处理变量元素高度，就像OP所指出的那样。[请参见JSFiddle]（http://jsfiddle.net/hJfgw/4/）。 - Roddy of the Frozen Peas

谢谢，但是是的，有两行的问题 :) - Oleg Pasko

你可以使用JavaScript或CSS截断文本 - http://jsfiddle.net/hJfgw/7/ - 但这取决于你的具体要求。 - Alex

嘿，谢谢你提供这个变体，但是对我来说截断不可接受 :( - Oleg Pasko