主页 / 问题 / 1244214
Accepted
Мне без сахара
Asked:2022-02-15 17:27:43 +0800 CST2022-02-15 17:27:43 +0800 CST

如何在 CSS 中做到这一点？

  • 772

如果您注意到如何执行此操作，此“div”底部有一个小箭头？ 在此处输入图像描述

html

2 个回答

  1. Best Answer

    您可以使用伪元素执行此操作：

    .tooltip {
  color: white;
  width: 100px;
  background-color: black;
  padding: 10px 20px;
  border-radius: 10px;
  text-align: center;
  position: relative;
}
.tooltip:after {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  left: 0;
  right: 0;
  bottom: -15px;
  margin: auto;
  border: 5px solid transparent;
  border-top: 10px solid black;
}
    <div class="tooltip">Lesson Name</div>

    • 2

  2. 三角形通常是通过以下技巧制成的border：

    .triangle {
  display: block;
  width: 0;
  height: 0;
  border: 10px solid transparent;
}

.triangle.to-bottom {border-top-color: red;}
.triangle.to-left {border-right-color: blue;}
.triangle.to-right {border-left-color: orange;}
.triangle.to-top {border-bottom-color: green;}
    <div class="triangle to-bottom"></div>
<div class="triangle to-left"></div>
<div class="triangle to-right"></div>
<div class="triangle to-top"></div>

    • 1

相关问题