小圆包对号

最新推荐文章于 2025-12-19 11:59:32 发布

原创最新推荐文章于 2025-12-19 11:59:32 发布 · 92 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

这段代码展示了如何使用CSS创建一个带有圆角的14px*14px的小圆，以及一个倾斜的白色箭头，箭头通过旋转和translate属性定位。主要涉及到的样式属性包括border-radius,border,displayflex,transform等。

效果

       .right {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 1px solid #0071E5;
        background-color: #0071E5;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .right::before {
        content: "";
        display: block;
        margin-top: 20px;
        margin-left: 3px;
        width: 10px;
        height: 5px;
        border: 1px solid #ffffff;
        border-right: none;
        border-top: none;
        transform: rotate(-45deg) translate(7px, -10px);
      }