有CSS的箭头箱子 [英] Arrow Box with CSS

问题描述

如何在CSS中创建此框？

How can I make this box in CSS?

我看过一些教程，教导如何使用箭头创建框，但在我的例子中，这些教程都不适合。

I've seen a few tutorials that teach how to create boxes with arrows, however, in my case, none of those tutorials are suitable.

推荐答案

我用周围的1px边框创建了你的元素。我使用一个< div> 元素并利用（> http://caniuse.com/#feat=css-gencontentrel =noreferrer>浏览器支持）。主矩形具有规则的1px边框，但三角形元素基本上是两个三角形，一个比另一个更暗。

I created your element with the surrounding 1px border. I'm using one <div> element and taking advantage of the :before and :after pseudo-elements (browser-support). The main rectangle has a regular 1px border, but the triangle elements are essentially 2 triangles, one darker than the other.

较亮的三角形位于较深的三角形的顶部，其具有隐藏它的效果，并且稍微向左移动以显示下面的较暗三角形。

The lighter triangle sits on top of the darker triangle, which has the effect of hiding it, and is shifted slightly to the left to show the darker triangle underneath. The resulting illusion is a 1px dark border on the triangle itself.

这里有一个问题，询问一个类似的问题：

Here's a question that asks a similar question:

我如何才能创建工具提示尾部使用纯CSS？

其中一个答案实际上对如何实现这个三角效果有很好的解释： / p>

One of the answers actually has a great explanation of how one can achieve this triangle effect:

http://stackoverflow.com/a / 5623150/196921

此外，这是一个极好的参考， a href =http://stackoverflow.com/a/16181002/196921>感谢PSCoder ）：

Also, this is an excellent reference for all the fancy things you can do with borders (thanks to PSCoder):

• http://css-tricks.com/examples/ShapesOfCSS/

• http://css-tricks.com/examples/ShapesOfCSS/

...这里是一个甜蜜的css生成器（感谢David Taiaroa ）：

... and here's a sweet css generator (thanks to David Taiaroa):

• http ：//cssarrowplease.com/

• http://cssarrowplease.com/

无论如何，代码：

    #arrow {
      width: 128px;
      height: 100px;
      background-color: #ccc;
      border: 1px solid #999;
      position: relative;
    }
    #arrow:after {
      content: '';
      position: absolute;
      top: 0px;
      left: 128px;
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-left: 12px solid #ccc;
    }
    #arrow:before {
      content: '';
      position: absolute;
      top: 0px;
      left: 129px;
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-left: 12px solid #999;
    }

<div id="arrow"></div>

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