Question

我使用内容的伪元素制作一个我希望漂浮在上面的三角形

设置问题：让this fiddle上的蓝色三角形更宽（但保持高度）

.bluebox { margin-top: 50px; background: blue; min-width: 300px; min-height: 200px; position: relative;}
    .bluebox:after { content: "\25B2"; color: blue; position: absolute; font-size: 2em; top: -0.8em; left: 5%;}

为了做到这一点，我需要调整哪些属性？

Answer 1

如果不支持IE8及以下版本，可以将scaleX()转换函数应用于伪元素。

例如（由于简洁而省略了供应商前缀）：

.bluebox:after {
    /* other declarations... */
    content: "\25B2";
    transform: scaleX(1.5);
}

在线示例：

＆＃13;

.bluebox {
    margin-top: 50px;
    background: blue;
    min-width: 300px;
    min-height: 200px;
    position: relative;
}

.bluebox:after {
     content: "\25B2";
    color: blue;
    position: absolute;
    font-size: 2em;
    top: -0.8em; left: 5%;
    -webkit-transform: scaleX(1.5);
    -moz-transform: scaleX(1.5);
    -ms-transform: scaleX(1.5);
    -o-transform: scaleX(1.5);
    transform: scaleX(1.5);
}

＆＃13;

<div class="bluebox"></div>

＆＃13;

如何使unicode三角形更宽

1 个答案: