2

我想创建一个标签或标签，如果可能的话，只使用 CSS 而没有图像。这就是我的意思：

标签

我可以创建一个端点，但我无法创建三角形点。是否可以仅使用 CSS 执行此操作？

4

5 回答 5

3

确实有创建 CSS 三角形的方法，这是 css-tricks.com 的一部分：

.arrow-right {
   width: 0; 
   height: 0; 
   border-top: 60px solid transparent;
   border-bottom: 60px solid transparent;
   border-left: 60px solid green;
}

http://css-tricks.com/snippets/css/css-triangle/

于 2012-10-16T01:10:50.337 回答
2

是的，但不是在支持 IE7 时：

<a class="tab">Your label text</a>

.tab {
    background: black;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    position: relative;
}
.tab::before {
    content: " ";
    position: absolute;
    right: 100%;
    top: 0;
    width: 0;
    height: 0;
    border-width: 35px; /* play with this value to match the height of the tab */
    border-style: solid;
    border-color: transparent black transparent transparent;
}
于 2012-10-16T01:15:14.520 回答
1

这应该是一个好的开始 http://css-tricks.com/snippets/css/css-triangle/

于 2012-10-16T01:11:03.810 回答
1

HTML

<div class="arrow-left"></div>
<div class="arrow-body"></div>

CSS

.arrow-left {   float:left;  width: 0;      height: 0;      border-top: 20px solid transparent;     border-bottom: 20px solid transparent;           border-right:20px solid blue;  }
.arrow-body{ float:left; width:200px; height:40px;  background-color:Blue;}
于 2012-10-16T01:14:43.810 回答
0

这是另一个

<div></div>​

div{
    width:500px;
    height:100px;
    background-color:black;
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
    margin-left:100px;
}
div:before{
    width:0;
    height:0;
    content:"";
    display:inline-block;
    border-top:50px solid transparent;
    border-right:100px solid black;
    border-bottom:50px solid transparent;
    position:absolute;
    left:0;
}

http://jsfiddle.net/e8feE/

于 2012-10-16T01:35:14.627 回答