background & background-image & border-image
https://developer.mozilla.org/en-US/docs/Web/CSS/background
https://developer.mozilla.org/en-US/docs/Web/CSS/border-image
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background
https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image
background & radius border
background color & view bug
https://codepen.io/xgqfrms/full/JQeqXQ
linear-gradient
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
https://codepen.io/xgqfrms/pen/WqEBLB
https://codepen.io/xgqfrms/pen/bPrymz
background-size
cover
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size
.circle {
position: absolute;
1.76rem;
height: 1.56rem;
line-height: 1.56rem;
/* background: url("../../images/guide/hexagon.png") cover no-repeat center center ; */
background: url("../../images/guide/hexagon.png") no-repeat center center ;
background-size: cover;
text-align: center;
vertical-align: middle;
cursor: pointer;
font-size: 0.28rem;
/* font-size: 0.16rem; */
color: #fff;
}
/* iphone 6/7/8 */
/* 375px & height: 667px */
@media (min- 375px) and (max- 375px) and (orientation: portrait) {
.circle {
position: absolute;
1.76rem;
height: 1.76rem;
line-height: 1.56rem;
background: url("../../images/guide/hexagon.png") no-repeat center center;
text-align: center;
vertical-align: middle;
cursor: pointer;
font-size: 0.16rem;
color: #fff;
}
.menu-text31 {
transform: translateX(0.55rem) translateY(-0.15rem);
}
.menu-text32 {
transform: translateX(-0.35rem) translateY(0.3rem);
}
}
/* iphone 6/7/8 plus*/
/* 414px & height: 736px */
@media (min- 414px) and (max- 414px) and (orientation: portrait) {
.circle {
position: absolute;
1.76rem;
height: 1.56rem;
line-height: 1.56rem;
background: url("../../images/guide/hexagon.png") no-repeat center center;
text-align: center;
vertical-align: middle;
cursor: pointer;
font-size: 0.16rem;
color: #fff;
}
.menu-text31{
transform: translateX(0.45rem) translateY(-0.15rem);
}
.menu-text32{
transform: translateX(-0.35rem) translateY(0.2rem);
}
}