有沒有一種方法一種方法來創建美味般的「箭頭標記」,而無需使用圖像: 圖像較少的純CSS標籤箭頭
我熟悉的border-triangle technique,但不能讓它看起來不錯(部分原因是我們需要一個額外的外邊框來構建整個組件)。
有沒有一種方法一種方法來創建美味般的「箭頭標記」,而無需使用圖像: 圖像較少的純CSS標籤箭頭
我熟悉的border-triangle technique,但不能讓它看起來不錯(部分原因是我們需要一個額外的外邊框來構建整個組件)。
我創建一個小例子可能是你想要的。
CSS
div{
padding:5px 10px;
font-size:12px;
-moz-border-radius:0 5px 5px 0;
-webkit-border-radius:0 5px 5px 0;
float:left;
margin-left:30px;
margin-top:20px;
position:relative;
font-family:verdana;
color:#3b3d3c;
border:1px solid #d5d5d7;
border-left:0;
}
div{
background: -moz-linear-gradient(top , #fbfdfc 0%,#f6f5f5 100%);
background: -webkit-linear-gradient(top , #fbfdfc 0%,#f6f5f5 100%);
}
div:after{
content:"";
width:18px;
height:18px;
background: -moz-linear-gradient(left top , #fbfdfc 0%,#f6f5f5 100%);
background: -webkit-linear-gradient(left top , #fbfdfc 0%,#f6f5f5 100%);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
display:block;
position:absolute;
top:3px;
left:-10px;
z-index:-1;
border:1px solid #d5d5d7;
}
入住這http://jsfiddle.net/9EEEP/76/
修訂 現在在Chrome也
工作越多,你看看我這個問題的答案也How to code certain css shapes?
我使用css3,它在IE8下面的瀏覽器中不起作用。
那麼svg呢? – Marcin 2012-04-15 10:27:22
如果我沒有記錯的話,SVG不僅適用於所有瀏覽器 - 加上HTML + CSS,你(希望)會得到更多優雅的降級。 – AnC 2012-04-15 12:11:00
不支持SVG的瀏覽器通常不支持CSS3。 – Marcin 2012-04-15 12:27:19