使用文本创建响应式三角形答案

【问题标题】：Create responsive triangle with text使用文本创建响应式三角形
【发布时间】：2014-06-23 23:35:55
【问题描述】：

我需要使用 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

谢谢，哈迪克

【问题讨论】：

为什么不使用背景图片？我们不能指望一切都在 CSS 中完成..
我同意...以前我们使用图像实现了相同的效果，但现在我们被告知使用 CSS 实现相同的效果... :( 我想知道是否有可能实现同样通过 CSS-CSS3..感谢您的宝贵时间！

标签： javascript css responsive-design css-shapes

【解决方案1】：

您可以使用伪元素和transform:rotate() 来制作一个适应其内容大小的三角形。

FIDDLE

此技术可能需要根据您使用它的上下文（与容器宽度比）以及文本变大时所需的设计进行一些调整。

HTML：

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

CSS：

.wrapper{
    position: relative;
    float:right;
    clear:right;
    overflow:hidden;
    z-index:1;
    padding:0 1% 0 30%;
    margin-right:5%;
}
.fa-play-circle-o{
    display:block;
    margin:130% 0 2%;
    color:#fff;
    text-decoration:none;
    font-size:18px;
    text-align:center;
}
.fa-play-circle-o:before{
    font-size:30px;
}

.wrapper:after{
    content:"";
    position:absolute;
    background-color:#666666;
    width:500%;
    height:100%;
    top:0;right:0;
    z-index:-1;

    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);

    -ms-transform-origin:100% 0;
    -webkit-transform-origin:100% 0;
    transform-origin:100% 0;    
}

【讨论】：

聪明！！很棒的实现方式，根本没有考虑旋转 div。感谢您的小提琴和回复！还要感谢@Mr_Green 的想法和时间..
@Hardik 很高兴我能提供帮助，如果他们有帮助，请毫不犹豫地为这两个答案投票 :)

【解决方案2】：

我认为只使用 CSS Gradient 是可能的。由于我不擅长渐变，所以我使用了online CSS gradient generator 并做了以下操作：

CSS

.triangle {
    width: 300px;
    border: 1px solid black;
    background-image: -webkit-gradient(linear, left top, left top, color-stop(0, #000000), color-stop(0.5, #FFFFFF));
    background-image: -o-linear-gradient(left top, #000000 0%, #FFFFFF 50%);
    background-image: -moz-linear-gradient(left top, #000000 0%, #FFFFFF 50%);
    background-image: -webkit-linear-gradient(left top, #000000 0%, #FFFFFF 50%);
    background-image: -ms-linear-gradient(left top, #000000 0%, #FFFFFF 50%);
    background-image: linear-gradient(to left top, #000000 0%, #FFFFFF 50%);
}

Working Fiddle

【讨论】：