html 带箭头流程,带箭头的HTML div注释框

这是我的解决方案jsfiddle。我希望每个人都可以利用它。

.left {

width: 920px !important;

padding-bottom: 40px;

min-height: auto !important;

padding-right: 0;

float: left;

}

.left > p:first-of-type {

background: #ffd987;

font-style: italic;

padding: 5px 10px;

margin-bottom: 40px;

}

.tip {

background: #fff;

border: 1px solid #ccc;

padding: 10px;

font-size: 1.2em;

position: relative;

width: 200px;

}

.tip:before {

position: absolute;

top: -14px;

left: 98px;

display: inline-block;

border-right: 14px solid transparent;

border-bottom: 14px solid #fff;

border-left: 14px solid transparent;

border-bottom-color: rgba(0, 0, 0, 0.2);

content: '';

}

.tip:after {

position: absolute;

top: -12px;

left: 99px;

display: inline-block;

border-right: 12px solid transparent;

border-bottom: 12px solid #fff;

border-left: 12px solid transparent;

content: '';

}

.tip.left:before {

border-top: 14px solid transparent;

border-right: 14px solid #fff;

border-bottom: 14px solid transparent;

border-right-color: rgba(0, 0, 0, 0.2);

left: -28px;

top: 20px;

}

.tip.left:after {

border-top: 12px solid transparent;

border-right: 12px solid #fff;

border-bottom: 12px solid transparent;

left: -24px;

top: 22px;

}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur quam a sapien egestas eget scelerisque lectus tempor. Duis placerat tellus at erat pellentesque nec ultricies erat molestie. Integer nec orci id tortor molestie porta. Suspendisse eu sagittis quam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur quam a sapien egestas eget scelerisque lectus tempor. Duis placerat tellus at erat pellentesque nec ultricies erat molestie. Integer nec orci id tortor molestie porta. Suspendisse eu sagittis quam.