Question

我该怎么办？

Picture http://i6.pixs.ru/storage/1/5/3/SnimokPNG_6031795_12562153.png

如果出现:hover或:active三角形并使背景可见。

Answer 1

你可以使用一个伪元素或一个内联块元素来绘制一个带有hudge box阴影的旋转方块，这个颜色位于它之外以填充其父元素。

<强> DEMO

HTML演示

<div>
  <h1>title</h1>
  <p> whatever next</p>
</div>

CSS演示

body {/* bg for demo to show transparency */
  background:linear-gradient(to left, rgba(0,0,0,0),rgba(0,0,0,5), rgba(0,0,0,0),rgba(0,0,0,5), rgba(0,0,0,0),rgba(0,0,0,5), rgba(0,0,0,0),rgba(0,0,0,5), rgba(0,0,0,0),rgba(0,0,0,5), rgba(0,0,0,0),rgba(0,0,0,5), rgba(0,0,0,0),rgba(0,0,0,5), rgba(0,0,0,0),rgba(0,0,0,5), rgba(0,0,0,0),rgba(0,0,0,5)) yellow
}
div {
  margin:2em;
  text-align:center;
  overflow:hidden;
}
div:before {
  content:'';
  display:inline-block;
  height:40px;
  width:40px;
  box-shadow:0 0 0 2000px white;
  margin-top:-20px;
  transform:rotate(45deg);
}
div * {
  position:relative;/* bring everything back on top of pseudo */
}
/* change bg color */
div:hover:before {
    box-shadow:0 0 0 2000px turquoise;
}

Answer 2

以下是仅限CSS的方法：JSFiddle。（此示例使用方形.jpg图像仅用于演示目的 - 您可以用三角形的.png替换它。）

以下是重点，假设三角形是图像文件，并附加到<a>标记**：

a {
    position: relative;
    width: 100%;
}

a:hover:before, a:focus:before {
    content: '';
    width: 16px; /* same as image width */
    height:16px; /* same as image height */
    display: inline-block;
    background: url('http://lorempixel.com/16/16/') center center no-repeat;  
    position: absolute;
    top: 0;
    left: 40%; /* adjust according to your design */
}

如果在px / em中设置<a>代码的宽度，则会影响left样式中:before规则的值

**我已经看到有些人尝试使用<li>附近<a>标记附带的图片或样式进行此类操作，但我更喜欢更改元素的样式成为目标。

Answer 3

只需要一个css悬停选择器来改变背景图像。

mydiv:hover
{ 
background-image:url('mytraingle.png');
}

有一百万种方法可以回答你的问题，但我会首先使用这个CSS选择器。也许这就是你所需要的。

菜单项上的透明三角形

3 个答案: