HTML内部带有箭头的方框

Question

一个客户要求在他的网站上添加类似下面这个盒子的外观： 正如您所看到的，盒子左侧有一个独特形状的小箭头。

我已经尝试了很多方法并查看了很多链接，但无法设计出来。

问题是这个盒子会有不同的大小，而该图像应始终位于盒子的中心，并应隐藏边框的一部分（如您所见）。

请帮忙设计，我已经没有其他选择了。

谢谢， Yasser

- Yousi

---

使用CSS3中的:after、:before和rotate...... - Rohit Azad Malik

请发布您目前尝试过的内容。 - Billy Moat

请查看此文章：http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/ - Sean

如果您继续向下滚动页面，您会注意到一个类似于您所需效果的效果。 - Sean

Answer 1

我为您制作了一个小工具:

<div class="box"></div>

.box{
    border:solid 1px black;
    position:relative;
    display:block;
    height:100px;
    width:100px;
    margin-left:5px;
}
.box:before{
    content:"";
    display:inline-block;
    position:absolute;
    border:10px solid black;
    border-color:transparent transparent transparent black;
    top:40px;
}
.box:after{
    content:"";
    display:inline-block;
    position:absolute;
    border:9px solid white;
    border-color:transparent transparent transparent white;
    top:41px;
    left:-1px;
}

在这里使用Fiddle http://jsfiddle.net/y5dZj/

正如其他人所说，使用:after和:before

-编辑：如果您想在旧浏览器中获得完全兼容性，请勿使用transform。我的示例甚至可以在IE8中运行（不确定7是否可以）

- Vytautas Butkus

---

@VytautasButkus 很棒的回答，你能解释一下这是如何工作的吗？ - Kevin Bowersox

首先，您需要创建一个简单的框。接下来，您需要一些伪元素，看起来像箭头。因为您只需要箭头的轮廓，所以您需要两个元素。因此，一个伪元素制作黑色箭头，另一个伪元素在其上制作白色箭头。要获得箭头外观，您可以尝试使用边框属性或阅读此处：http://css-tricks.com/snippets/css/css-triangle/ - Vytautas Butkus

这很好，并且在IE8上运行。但是，有没有办法控制三角形的大小？它太大了。另外，如果我改变框的高度，箭头将不会移动到中间:( - Yousi

箭头的大小是通过更改边框宽度属性进行调整的。此外，如果您想将箭头向上或向下移动，您需要调整顶部属性。这些事情适用于:before和:after元素，因为箭头是“两个箭头”的组合。如果您认为我回答了您的问题，您可以将其标记为正确答案 :) - Vytautas Butkus

只有一个问题：）如何更改边框颜色？当我尝试将其变为灰色时，箭头仍然是黑色的，所以我尝试更改箭头的边框颜色，有时会得到正方形的形状..有时只有没有边框的白色箭头..这是最后的提示:) - Yousi

好的，忘记上一个问题吧 :) .. 那是我的错.. 我忘了在颜色代码前面加上"#" :) .. 你太棒了，你救了这个项目 :) - Yousi

Answer 2

Used to this

Css

 div{
    position:relative;
      width:200px;
      height:200px;
      background:red;
    }
    div:after{
    content:'';
      position:absolute;
      left:-10px;
      top:50%;
      margin-top:-10px;
      width:20px;
      height:20px;
      background:#fff;
      transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
    }

HTML

<div></div>

Demo

- Rohit Azad Malik

Answer 3

这是一种可能的方法：http://jsfiddle.net/vKY3x/

<div>
    <span></span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus varius felis, sit amet malesuada urna euismod convallis. Donec at diam eros
</div>

div {
    position:relative;
    width:300px;
    padding:30px;
    border:1px solid #ccc;
}

div span {
    display:block;
    width:20px;
    height:20px;
    background:#666;
    position:absolute;
    left:-1px;
    top:50%;
    margin-top:-10px;
}

- Billy Moat

---

这是一个不错的解决方案。有没有办法控制三角形的大小？它太大了。 - Yousi

嗨。您只需更改我的示例中的大小以适应您的需求。显然，在span标记内放置一个三角形图形。 - Billy Moat

Answer 4

HTML

<div></div>​

CSS

div {
    margin:20px;
    height: 120px;
    width: 250px;
    background-color: #ededed; 
    border:#ccc solid 1px;
    position:relative;
}
div:after{
    content:'';
    width:20px;
    height:20px;
    background:#fff;
    position:absolute;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    top:42%;
    left:-11px;
    border-right:#ccc solid 1px;
    border-top:#ccc solid 1px;
} ​

现场演示

- Sowmya