在Bootstrap中将特征转角添加到面板标题中 [英] Adding a featured corner to panel heading in Bootstrap

问题描述

我试图在面板标题的面板边角添加一个小三角形边框。

我可以使用此示例添加一个：

在更改后的决议中，它看起来像这样：

我的面板代码：

 < div class =col-lg-6> 
< div class =panel> 
< div class =ribbon-wrapper-featured> 
< div class =featured fa>< / div> 
< / div> 
< div class =panel-heading> 
 
< h3 class =panel-title>选择活动流< / h3> 
< / div> 
< div class =panel-body> 
< / div> 
< / div> 
 
< / div> 
  

CSS：

 < style> 
 / *角丝带* / 
 .ribbon-wrapper-featured {
位置：绝对; 
 top：-50px; 
 right：0px; 
} 
 
 .featured.fa {
 width：100px; 
 height：100px; 
 display：block; 
位置：绝对; 
 top：50px; 
 right：10px; 
} 
 
 .featured.fa ::之前{
 position：absolute; 
正确：0％; 
 top：0; 
保证金：.25em; 
颜色：金色; 
 z-index：2; 
} 
 
 .featured :: after {
 content：''; 
位置：绝对; 
 / * width：0; * / 
 / *高度：0; * / 
 / * top：0; * / 
剩下：-38.4em; 
 border-width：20px; 
 border-style：solid; 
 border-color：＃03a9f4 transparent transparent＃03a9f4; 
 / * outline：auto; * / 
 z-index：1; 
} 
 
 .panel-title {
 background-color：＃232323; 
 text-transform：大写; 
 font-family：'Open Sans Condensed'，sans-serif; 
颜色：＃03a9f4; 
 font-size：1.5em; 
 padding：0 20px 0 60px; 
} 
< / style> 
  

谢谢！

解决方案

data-lang =jsdata-hide =falsedata-console =truedata-babel =false>

  .wrapper {background-color：#ddd; height：30px;}。panel-heading {height：0;宽度：0; border-bottom：30px solid transparent; border-left：30px纯蓝色; float：left;} h3 {line-height：30px; }  

 < div class =wrapper> < div class =panel-heading>< / div> < h3 class =panel-title>选择活动流< / h3>< / div>  

创建三角形的源代码： https：/ /css-tricks.com/snippets/css/css-triangle/

I am trying to add a small triangle border in the panel corners of the panel headings.

I was able to add one using this example :

Featured filled corner css

I had to make minor changes to bring it to the left. But it only "kinda" works. It wont stick on changed resolutions though.

On changed resolutions it looks like this:

My Code for the Panel:

 <div class="col-lg-6">
            <div class="panel">
                <div class="ribbon-wrapper-featured">
                    <div class="featured fa"></div>
                </div>
                <div class="panel-heading">

                    <h3 class="panel-title">Select Activity Stream</h3>
                </div>
                <div class="panel-body">
                </div>
            </div>

        </div>

CSS:

  <style>
        /*corner ribbon*/
        .ribbon-wrapper-featured {
            position: absolute;
            top: -50px;
            right: 0px;
        }

        .featured.fa {
            width: 100px;
            height: 100px;
            display: block;
            position: absolute;
            top: 50px;
            right: 10px;
        }

            .featured.fa::before {
                position: absolute;
                right: 0%;
                top: 0;
                margin: .25em;
                color: gold;
                z-index: 2;
            }

        .featured::after {
            content: '';
            position: absolute;
            /* width: 0; */
            /* height: 0; */
            /* top: 0; */
            left: -38.4em;
            border-width: 20px;
            border-style: solid;
            border-color: #03a9f4 transparent transparent #03a9f4;
            /* outline: auto; */
            z-index: 1;
        }

        .panel-title {
            background-color: #232323;
            text-transform: uppercase;
            font-family: 'Open Sans Condensed', sans-serif;
            color: #03a9f4;
            font-size: 1.5em;
            padding: 0 20px 0 60px;
        }
    </style>

Thanks!

解决方案

I haven't been able to check against different resolutions, and there might be improvements possible on the triangle:

.wrapper {
    background-color: #ddd;
    height: 30px;
}
.panel-heading {
    height: 0;
    width: 0;
    border-bottom: 30px solid transparent;
    border-left: 30px solid blue;
    float: left;
}
h3 {
    line-height: 30px;    
}

<div class="wrapper">
    <div class="panel-heading"></div>
    <h3 class="panel-title">Select Activity Stream</h3>
</div>

Source for making triangles: https://css-tricks.com/snippets/css/css-triangle/

这篇关于在Bootstrap中将特征转角添加到面板标题中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！