用CSS将三角形添加到div的一侧 [英] Add triangle to side of div with css

问题描述

我需要在菜单中当前li的侧面添加一个三角形.我对其进行了设置，以便可以使用jquery编辑它的CSS，并想知道是否有可能通过编辑li上的边框而不是添加新的div来实现这种效果.

I need to add a triangle to the side of my current li in the menu. I set it up so I can edit the css of it with jquery, and want to know if it's possible to achieve this affect by editing the border on the li instead of adding a new div.

jsfiddle:我想通过向div-1添加边框来了解第二个div /p>

jsfiddle: I would like to get look of the second div by just adding borders to div-1

<div class="div-1"></div>
<br>
<div class="div-1"><div><div class="triangle"></div>

.div-1 {
    width:174px;
    height:32px;
    line-height:32px;
    margin-bottom:6px;
    display:block;
    background-color:#149dae;
}
.triangle {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 16px 0 16px 16px;
    border-color: transparent transparent transparent #149dae;
    position:absolute;
    margin-left:174px;
}

推荐答案

这里是小提琴 http://jsfiddle .net/py3BU/4/ 我已经编辑了您的代码.这就是您要找的东西吗?您将鼠标悬停在div的一侧会出现一个三角形.

Here is the fiddle http://jsfiddle.net/py3BU/4/ I have edited your code. This is what you were looking for? A triangle comes to side of the div which you hover.

这是代码.

html代码.

  <div class="div-1"></div>
  <br>
  <br /><div class="div-1"></div> 

这是CSS代码

.div-1 
{
    width:174px;
    height:32px;
    line-height:32px;
    margin-bottom:6px;
    display:block;
    background-color:#149dae;
}

 .div-1:hover 
 {
   width:158px;
   height: 0px;
   border-style: solid;
   border-width: 16px 0 16px 16px;
   border-color: transparent transparent transparent #85b375;
 }

我希望你想实现这一目标.

I hope you wanted to achieve this.

这篇关于用CSS将三角形添加到div的一侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！