html - 我怎样才能制作一个带有右边框居中箭头的评论框

Question

类似这样，但我希望箭头位于右边框并居中。它会响应吗？

The CSS
.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;
	}

The html
<div style="padding:50px">
	
	<div class="tip left">
		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.
	</div>
</div>	

Answer 1

使用transform: translate

.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, 
.tip:after{
    content:'';
    position: absolute; top: 50%; right: -28px;
    border: 14px solid transparent;
    border-left: 14px solid #ccc;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}
.tip:after {
    border-left: 14px solid white;
    right: -27px; 
}

<div style="padding:50px">
    <div class="tip left">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.</div>
</div>

http://jsfiddle.net/soledar10/dog8mdkf/