Question

我有以下div与屏幕左侧对齐

CSS

reshape

此div包含一个充当链接的图标

HTML

CV_32FC3

我希望div是一个三角形（指向右边）而不是正方形

Answer 1

我觉得这个网站很有用：https://css-tricks.com/examples/ShapesOfCSS/

朝右三角：

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

您可以调整边框属性以更改三角形的宽度，高度和颜色。

这样的事情可能就是你所寻找的：https://jsfiddle.net/kh2xsoh2/1

<强> HTML

<div id="nav"><span>icon</span></div>

<强> CSS

#nav {
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-left: 50px solid #000;
    border-bottom: 25px solid transparent;
    position: fixed;
}

#nav span {
  position: absolute;
  line-height: 0;
  left: -45px;
  color: white;
}

屏幕左侧显示三角形

1 个答案: