html – 使用CSS创建没有填充的箭头

发布时间：2020-12-14 18:45:07 所属栏目：资源来源：网络整理

导读：使用CSS创建三角形是非常简单和常见的做法,但是可以使用透明背景和边框以类似的方式创建三角形. 这就是我想要创建的内容：考虑到三角形通常的制作方式,我真的不知道从哪里开始,因为它们依赖于伪元素和重叠边框等.如果边框是透明的,这显然是不可能的. 有没有

使用CSS创建三角形是非常简单和常见的做法,但是可以使用透明背景和边框以类似的方式创建三角形.

这就是我想要创建的内容：

考虑到三角形通常的制作方式,我真的不知道从哪里开始,因为它们依赖于伪元素和重叠边框等.如果边框是透明的,这显然是不可能的.

有没有人有任何想法如何做到这一点？它甚至可能吗？

解决方法

使用转换：

div {
  border: 1px solid #000;
  border-width: 0 0 2px 2px;
  width: 10px;
  height: 10px;
  line-height: 0;
  font-size: 0;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
div:first-child {
  margin-bottom: 25px;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

<div></div>
<div></div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!