小编Har*_*dik的帖子

我需要使用css和html创建一个响应三角形.三角形将包含文本,随着文本的增加,我希望三角形的大小也增加.

下面是我创建的小提琴.

小提琴

<div class="wrapper">
    <div class="top-layer-content banner-notch"></div>
    <a class="icon-play fa fa-play-circle-o" rel="lightbox" href="#">
        <p> See it in action</p>
    </a>
<div>

.wrapper{
    position:relative;
}
.banner-notch {
    width: 0;
    height: 0;
    border-bottom: 220px solid #000;
    border-left: 220px solid transparent;
    filter: alpha(opacity=50);
    opacity: 0.6;
    color:white;
    position:relative;
    float:right;
}

.wrapper a{
    position:absolute;
    top:130px;
    right:20px;
    color:white;
    text-decoration:none;
    font-size:25px;
    background-position:0 50px;
}

.wrapper .fa-play-circle-o:before{
    padding-left:38px;
}

.wrapper p{
    font-size:16px;
}

我检查了以下链接,但似乎三角形的形状不同,文字似乎没有换行.文字开始溢出.

Link1和link2

谢谢,哈迪克