伊谢尔伦2017-04-18 09:51:55
程式猿的解決方法是;創建一個正方形的 view ; 背景顏色 和 那個主框顏色相同。 然後; 將這個 正方形 view 旋轉 90 度。 新增到 主框中。指定位置 即可。也就是,這個樣式是兩個 view 拼出來的。
伊谢尔伦2017-04-18 09:51:55
可以畫一個出來,省了切圖資源,效率也更高,方便重複使用。
- (UIView *)arrowView{
if (!_arrowView) {
// draw
CGSize size = CGSizeMake(kDefaultArrowWeight, kDefaultArrowHeight);
UIBezierPath *path = [[UIBezierPath alloc] init];
[path moveToPoint:CGPointMake(size.width / 2.0, 0)];
[path addLineToPoint:CGPointMake(0, size.height)];
[path addLineToPoint:CGPointMake(size.width, size.height)];
path.lineWidth = 1.0;
CAShapeLayer *arrowLayer = [CAShapeLayer layer];
arrowLayer.path = path.CGPath;
_arrowView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, size.width, size.height)];
_arrowView.layer.mask = arrowLayer;
_arrowView.backgroundColor = self.contentViewBackgroundColor;
}
return _arrowView;
}
高洛峰2017-04-18 09:51:55
HTML:
<p class="test_triangle_border">
<a href="#">三角形</a>
<p class="popup">
<span><em></em></span>测试
</p>
</p>
CSS:
.test_triangle_border{
width:200px;
margin:0 auto 20px;
position:relative;
}
.test_triangle_border a{
color:#333;
font-weight:bold;
text-decoration:none;
}
.test_triangle_border .popup{
width:100px;
background:#cf0;
padding:10px 20px;
color:#333;
border-radius:4px;
position:absolute;
top:30px;
left:30px;
border:1px solid #333;
}
.test_triangle_border .popup span{
display:block;
width:0;
height:0;
border-width:0 10px 10px;
border-style:solid;
border-color:transparent transparent #333;
position:absolute;
top:-10px;
left:50%;/* 三角形居中显示 */
margin-left:-10px;/* 三角形居中显示 */
}
.test_triangle_border .popup em{
display:block;
width:0;
height:0;
border-width:0 10px 10px;
border-style:solid;
border-color:transparent transparent #cf0;
position:absolute;
top:1px;
left:-10px;
}
這是我答過別的的答案, 自己根據需求改吧