布尔玛箭

在本文中，我们将了解Bulma Arrow 。 Arrow 是 Bulma 中的一个 mixin，它是在 SASS mixin 的帮助下创建的。 Bulma 框架使用 SASS mixin 来创建自定义 CSS 输出。 arrow()是一个在 CSS 的帮助下创建箭头图标或图形的 mixin。

先决条件： CSS预处理器SASS

Bulma Arrow 类：在 Bulma 的官方文档中没有提到具体的类，而是我们可以创建自己的类并在 SASS mixins 的帮助下使用它来设置元素的样式。

句法：

.arrow-mixin {
    @include arrow();
}

注意：只有当您知道将 SASS 混合作为 CSS 文件运行时，才能显示输出（因为 SASS 在浏览器中不起作用）。请在继续查看示例之前检查。

示例 1：下面的示例说明了Bulma Arrow Mixin

CSS

@mixin arrow() {
    border: 4px solid green;
    border-radius: 2px;
    border-right: 0;
    border-top: 0;
    display: block;
    height: 2em;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: rotate(-45deg);
    transform-origin: center;
    width: 2em;
}
  
.arrow-mixin {
    @include arrow();
}

输出：

布尔玛箭

示例 2：说明Arrow Mixin 的另一个示例

HTML

    

    
    


    

        
Bulma Arrow
        
    

    

CSS

@mixin arrow() {
    border: 6px solid blue;
    border-radius: 2px;
    border-right: 0;
    border-top: 0;
    display: block;
    height: 1em;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: rotate(135deg);
    transform-origin: center;
    width: 1em;
}
  
.arrow-mixin {
    @include arrow();
}

输出：

布尔玛箭

参考： https://bulma.io/documentation/utilities/mixins/#arrow