Css 如何有一个曲线边三角形

Css 如何有一个曲线边三角形,css,Css,我想要一个css3中的曲线边三角形。有可能在css3中得到它吗? 我下面的代码有一个正三角形 我想要这样。。 您可以这样做: CSS .arrow{ width:50px; height:100px; position:relative; overflow:hidden; } .arrow:after{ content:''; width:100px; height:100px; -moz-transform:rotate(45d

我想要一个css3中的曲线边三角形。有可能在css3中得到它吗? 我下面的代码有一个正三角形

我想要这样。。 您可以这样做:

CSS

.arrow{
    width:50px;
    height:100px;
    position:relative;
    overflow:hidden;
}
.arrow:after{
    content:'';
    width:100px;
    height:100px;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    background:red;
    position:absolute;
    top:0;
    right:-70px;
    border-radius:10px;
    -moz-border-radius:10px;
}
HTML

<div class="arrow"></div>

选中此项

您可以这样做:

CSS

.arrow{
    width:50px;
    height:100px;
    position:relative;
    overflow:hidden;
}
.arrow:after{
    content:'';
    width:100px;
    height:100px;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    background:red;
    position:absolute;
    top:0;
    right:-70px;
    border-radius:10px;
    -moz-border-radius:10px;
}
HTML

<div class="arrow"></div>

检查这个