2

我需要在 div 中创建一个箭头。我已经创建了箭头,但需要获得带有边框的视觉效果,如下所示

在此处输入图像描述

试用示例的演示http://jsfiddle.net/rLZkf/4/

div {
  margin: 20px;
  height: 200px;
  width: 200px;
  background-color: #c1c1c1;
  border: #000 solid 2px;
  background-image: -webkit-linear-gradient(135deg, transparent 75%, #fff 75%), -webkit-linear-gradient(45deg, transparent 75%, #fff 75%);
  background-image: -moz-linear-gradient(135deg, transparent 75%, #fff 75%), -moz-linear-gradient(45deg, transparent 75%, #fff 75%);
  background-image: -ms-linear-gradient(135deg, transparent 75%, #fff 75%), -ms-linear-gradient(45deg, transparent 75%, #fff 75%);
  background-image: -o-linear-gradient(135deg, transparent 75%, #fff 75%), -o-linear-gradient(45deg, transparent 75%, #fff 75%);
  background-image: linear-gradient(135deg, transparent 75%, #fff 75%), linear-gradient(45deg, transparent 75%, #fff 75%);
  background-position: 30px 0, 0 0;
  background-repeat: no-repeat;
  background-size: 30px 30px;
}
<div></div>

4

2 回答 2

4

您可以为此使用 CSS3旋转属性。像这样写:

div {
    margin:20px;
    height: 200px;
    width: 200px;
    background-color: #c1c1c1;
    border:#000 solid 2px;
    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:-11px;
    left:10px;
    border-right:#000 solid 2px;
    border-bottom:#000 solid 2px;
} 

检查这个http://jsfiddle.net/rLZkf/6/

更新

检查这个http://jsfiddle.net/rLZkf/9/

于 2012-09-28T06:09:53.360 回答
0

就个人而言,我非常喜欢在这里选择的答案使用不同的方法。

例如,使用https://css-tricks.com/snippets/css/css-triangle/上解释的原理,您可以使用两个伪元素来创建您所追求的效果。

您将基本上使用此边框技巧创建两个三角形:一个与您的页面背景颜色相同,另一个与您的容器边框相同,并将充当第一个三角形的“边框”。

然后,您只需偏移两个三角形的位置,使它们位于容器边框的顶部,仅此而已。

.container:after,
.container:before {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent; 
  content: " ";
  left: 10px; 
  margin-top: -1px;
  position: absolute;
}

.container:before {
  border-top: 10px solid #000;
  top: 1px; 
}

.container:after {
  border-top: 10px solid #fff;
  top: 0px; 
}

当然,如果你使用 Sass 或类似的东西,你可以将整个东西包装在一个 mixin 中,并将颜色/箭头大小传递给它。

有关快速示例,请参阅http://codepen.io/arnaudvalle/pen/EjgYrp

于 2015-05-20T07:55:23.707 回答