带箭头的自定义引导指示器

时间:2018-01-19 19:50:40

标签: html css twitter-bootstrap

我正在尝试使用Bootstrap在Photoshop中创建这个红色指示器设计。

enter image description here

使用所有代码

Here is the link to my JSFiddle

无论我尝试什么,我都无法将三角形排成一行,也无法让透明工具栏区域延伸到div。另外,我尝试更改z-index箭头出现在白色子导航栏下面,白色边框似乎没有环绕三角形。

大师的任何帮助?

但我的设计看起来更像是这样:

enter image description here

1 个答案:

答案 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">&nbsp;</div>

		</div>
	</div>
</div>
&#13;
&#13;
&#13;