将div的右侧作为箭头 [英] Make the right side of a div as an arrow

问题描述

我在网页上有一个简单的div：

 < div& 
  

使用CSS可以使其完成箭头。像：

UPDATE

这是我在web-tiki提出的解决方案中看到的结果： p>

查看箭头上的切口？

谢谢你，
Miguel

解决方案

---

编辑：
如果需要箭头来适应文字（考虑到它可以在几行显示）您可以使用 linear-

FIDDLE

---

$ b

FIDDLE

CSS：

  div {
 height：40px; 
 background：red; 
 color：#fff; 
 position：relative; 
 width：200px; 
 text-align：center; 
 line-height：40px; 
} 
 div：after {
 content：; 
 position：absolute; 
 height：0; 
 width：0; 
 left：100％; 
 top：0; 
 border：20px solid transparent; 
 border-left：20px solid red; 
} 
  

I have a simple div on a page:

<div>Some Text</div>

Is it possible, with CSS, to make it finish as an arrow. Something like:

UPDATE

This is the result I see with web-tiki proposed solution:

See the cuts on the arrow?

Thank You, Miguel

解决方案

---

EDIT : If you need the arrow to adapt to the height of the text (considering it can display on several lines) You can use linear-gradient background for the arrow.

FIDDLE

---

This can make it :

FIDDLE

CSS :

div{
    height:40px;
    background:red;
    color:#fff;
    position:relative;
    width:200px;
    text-align:center;
    line-height:40px;
}
div:after{
    content:"";
    position:absolute;
    height:0;
    width:0;
    left:100%;
    top:0;
    border:20px solid transparent;
    border-left: 20px solid red;
}

这篇关于将div的右侧作为箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！