如何使用右边框中心的箭头创建注释框

Question

这样的东西，但我希望箭头在右边界并居中。会有回应吗？

＆＃13;

＆＃13;

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;
	}

＆＃13;

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>	

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是你改变箭头方向并垂直居中的方法

.tip.left:before {
  border-right: 14px solid #fff;
  right: -28px;
  top: 50%;
}

.tip.left:after {
  top: 50%;
}

Answer 2

使用ContainerSelectionDialog

＆＃13;

＆＃13;

transform: translate

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 3

您可以按照以下方式执行此操作：

＆＃13;

＆＃13;

.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;
		right: 50px;
		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;
		right: 50px;
		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-left: 14px solid #fff;
		border-bottom: 14px solid transparent;
		border-left-color: rgba(0, 0, 0, 0.2);
		right:-28px;
		top: 50%;
    transform: translateY(-50%);
	}

	.tip.left:after {
		border-top: 12px solid transparent;
		border-left: 12px solid #fff;
		border-bottom: 12px solid transparent;
		right: -24px;
		top: 51.5%;
    transform: translateY(-57%);
	}

＆＃13;

<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>	

＆＃13;

＆＃13;

＆＃13;

有关详细信息，请参阅css-triangles和Link。