带底部边框的css箭头

我需要在div内创建一个箭头。我创建了箭，但需要得到与边境visul效果如下图所示带底部边框的css箭头

enter image description here

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>

来源

2012-09-28 Sowmya

您可以使用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-28 06:09:53 sandeep

嗨桑迪普感谢，但身体已经在针锋相对的情况下箭头diffrnt颜色上也DIV的顶部可见。这里是示例http://jsfiddle.net/rLZkf/8/我们如何解决这个问题？ – Sowmya

检查您想要的链接http://jsfiddle.net/rLZkf/9/ – sandeep

yup thank you .... – Sowmya

就个人而言，我很喜欢在这里使用不同的方法所选择的答案。

例如，使用在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; 
}

当然你可以包住整个事情在一个mixin如果你使用无礼或相似，并通过它的颜色/箭头大小。

见http://codepen.io/arnaudvalle/pen/EjgYrp为一个简单的例子

来源

2015-05-20 07:55:23

带底部边框的css箭头

回答

相关问题