Html 带左箭头的引导jumbotron
我正在尝试创建一个带有左箭头的jumbotron(可能使用另一个组件),该箭头指向左边另一列中的文本 下面的图片正是我想做的 这项工作到底是如何完成的Html 带左箭头的引导jumbotron,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我正在尝试创建一个带有左箭头的jumbotron(可能使用另一个组件),该箭头指向左边另一列中的文本 下面的图片正是我想做的 这项工作到底是如何完成的 这可以通过使用另一个具有自定义边框属性的组件来完成 比如说, CSS: HTML: 巨无霸 另外,您可能需要调整属性以满足您的需要 这是您自己试过吗?-看起来不太好…是的,我做了。但是,您可能需要调整属性以满足您的需要。我添加了jsfiddle。 .jumbo { position: relative; display: in
这可以通过使用另一个具有自定义边框属性的组件来完成 比如说, CSS: HTML:
巨无霸
另外,您可能需要调整属性以满足您的需要
这是您自己试过吗?-看起来不太好…是的,我做了。但是,您可能需要调整属性以满足您的需要。我添加了jsfiddle。
.jumbo {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.jumbo .arrow {
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 110%;
}
.arrow::after {
content: "";
position: absolute;
top: 20%;
right: 100%;
margin-top: -8px;
border-width: 20px;
border-style: solid;
border-color: transparent black transparent transparent;
}
<div class="jumbo">
<span class="arrow">Jumbotron</span>
</div>