css带底部边框的箭头 [英] css arrow with bottom border

问题描述

我需要在div内创建一个箭头。我创建了箭头，但需要得到的边框的效果如下所示

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

  div {margin：20px; height：200px; width：200px; background-color：＃c1c1c1; border：＃000 solid 2px;背景图像：-webkit-线性梯度（135deg，透明75％，#fff 75％），-webkit-线性梯度（45deg，透明75％，#fff 75％）。背景图像：-moz-线性梯度（135deg，透明75％，#fff 75％），-moz-线性梯度（45deg，透明75％，#fff 75％）。背景图像：-ms-线性梯度（135deg，透明75％，#fff 75％），-ms-线性梯度（45deg，透明75％，#fff 75％）。背景图像：-o-线性梯度（135deg，透明75％，#fff 75％）， - 非线性梯度（45deg，透明75％，#fff 75％）。背景图像：线性梯度（135deg，透明75％，#fff 75％），线性梯度（45deg，透明75％，#fff 75％）。 background-position：30px 0，0 0;背景重复：无重复; background-size：30px 30px;}  

 < div& < / div>  

解决方案

您可以使用CSS3 rotate 属性。这样写：

  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/

UPDATED / p>

请检查此 http://jsfiddle.net/rLZkf/ 9 /

I need to create an arrow inside a div. I have created the arrow but need to get the visul effect with border as shown as below

Demo of the tried sample 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>

解决方案

You can use CSS3 rotate property for this. Write like this:

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;
} 

Check this http://jsfiddle.net/rLZkf/6/

UPDATED

Check this http://jsfiddle.net/rLZkf/9/

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