我正在尝试使用Bootstrap在Photoshop中创建这个红色指示器设计。
使用所有代码
Here is the link to my JSFiddle
无论我尝试什么,我都无法将三角形排成一行,也无法让透明工具栏区域延伸到div。另外,我尝试更改z-index
箭头出现在白色子导航栏下面,白色边框似乎没有环绕三角形。
大师的任何帮助?
但我的设计看起来更像是这样:
答案 0 :(得分:1)
这是类似的东西
小提琴:http://jsfiddle.net/4tx2jamp/3/
以下代码段
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom : 0;
border-radius : 0;
background-color : #2a5e8d;
border-width : 0;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {
height : 450px;
background-color : #e2e2e2;
}
.content-nav {
background-color : #fff;
height : 25px;
}
/* Set gray background color and 100% height */
.sidenav {
padding-top : 30px;
background-color : #373737;
height : 100%;
}
.indicator {
margin-top : 0;
margin-bottom : 0;
margin-left : -20px;
margin-right : -16px;
padding : 0;
list-style : none;
background : #e74f50;
color : #fff;
text-decoration : none;
text-align : right;
font-size : 10px;
border-top : 2px solid #fff;
border-bottom : 2px solid #fff;
position:relative;
}
.indicator:after {
content : "";
float : right;
position : absolute;
top : 0;
right : -21px;
width : 0;
height : 0;
border-color : transparent transparent transparent #e74f50;
border-style : solid;
z-index:5;
border-width : 44px 0 44px 21px;
}
.indicator:before {
content : "";
float : right;
position : absolute;
top : -3px;
right : -23px;
width : 0;
height : 0;
border-color : transparent transparent transparent white;
border-style : solid;
border-width: 47px 0px 47px 23px;
height: calc(100% + 2px);
z-index:4;
}
.indicator .title {
float : left;
padding-top : 18px;
/*line-height : 42px;*/
position : relative;
font-size : 24px;
width : 100%;
}
.indicator span.tools {
background : rgba(0, 0, 0, 0.25);
width : 100%;
font-size : 18px;
display: inline-block;
}
.indicator span.tools:after {
content: '';
border-color: transparent transparent transparent rgba(0, 0, 0, 0.25);
border-width: 0px 0px 26px 12px;
border-style: solid;
position: absolute;
right: -12px;
z-index: 6;
}
.indicator .tools span.glyphicon {
color : #e2e2e2;
padding-left : 10px;
size : 8px;
}
.text-dropshadow {
-webkit-text-shadow : 0 1px rgba(0, 0, 0, 0.55);
-moz-text-shadow : 0 1px rgba(0, 0, 0, 0.55);
text-shadow : 0 1px rgba(0, 0, 0, 0.55);
}
.dropshadow {
-webkit-box-shadow : 0px 6px 6px -2px rgba(150, 150, 150, 0.5);
-moz-box-shadow : 0px 6px 6px -2px rgba(150, 150, 150, 0.5);
box-shadow : 0px 6px 6px -2px rgba(150, 150, 150, 0.5);
}
.rightshadow {
-webkit-box-shadow : 7px 0px 6px -2px rgba(150, 150, 150, 1);
-moz-box-shadow : 7px 0px 6px -2px rgba(150, 150, 150, 1);
box-shadow : 7px 0px 6px -2px rgba(150, 150, 150, 1);
}
/* Set black background color, white text and some padding */
footer {
background-color : #555;
color : white;
padding : 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width : 767px) {
.sidenav {
height : auto;
padding : 15px;
}
.row.content {
height : auto;
}
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse ">
<div class="container-fluid ">
</div>
</nav>
<div class="container-fluid text-center">
<div class="row content">
<div class="col-sm-3 sidenav rightshadow">
<div class="indicator rightshadow">
<p class="title text-dropshadow">Some text </p>
<span class="tools text-dropshadow ">
<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-glass"></span>
<span class="glyphicon glyphicon-send"></span>
<span class="glyphicon glyphicon-print"></span>
<span class="glyphicon glyphicon-refresh"></span>
</span>
</div>
</div>
<div class="col-sm-9 text-left">
<div class="row content-nav dropshadow"> </div>
</div>
</div>
</div>
&#13;