javascript - 菜单项上的透明三 Angular 形

Question

我怎样才能做这样的事情？

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

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

Answer 1

您可以使用伪元素或行内 block 元素来绘制旋转正方形，带有阴影框阴影，该颜色位于其外部以填充其父元素。

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