You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
153 lines
3.8 KiB
153 lines
3.8 KiB
<template>
|
|
<!-- <view class="tip-top">我是提示框1</view>
|
|
<view class="tip-bottom"> 我是提示框2</view>
|
|
<view class="tip-left">我是提示框3</view>
|
|
<view class="tip-right">我是提示框4</view> -->
|
|
<view class="tip-bottom" style="margin-top: 100rpx;">我是提示框</view>
|
|
</template>
|
|
|
|
<script>
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: grey;
|
|
}
|
|
|
|
/*提示框容器-上三角形*/
|
|
.tip-top {
|
|
margin: 20px;
|
|
padding: 5px;
|
|
width: 300px;
|
|
height: 60px;
|
|
border: 2px solid #f99;
|
|
position: relative;
|
|
background-color: #FFF;
|
|
/*设置圆角*/
|
|
-webkit-border-radius: 5px;
|
|
-moz-border-radius: 5px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/*生成2个叠加的三角形*/
|
|
.tip-top:before, .tip-top:after {
|
|
content: "";
|
|
display: block;
|
|
border-width: 15px;
|
|
position: absolute;
|
|
top: -30px;
|
|
left: 100px;
|
|
border-style: solid dashed dashed solid;
|
|
border-color: transparent transparent #f99 transparent;
|
|
font-size: 0;
|
|
line-height: 0;
|
|
}
|
|
|
|
/*将上面的三角形颜色设置和容器背景色相同*/
|
|
.tip-top:after {
|
|
top: -27px;
|
|
border-color: transparent transparent #FFF transparent;
|
|
}
|
|
|
|
/*下三角*/
|
|
.tip-bottom {
|
|
margin: 20px;
|
|
padding: 5px;
|
|
width: 300px;
|
|
height: 60px;
|
|
border: 2px solid #f99;
|
|
position: relative;
|
|
background-color: #0FF;
|
|
/*设置圆角*/
|
|
-webkit-border-radius: 5px;
|
|
-moz-border-radius: 5px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.tip-bottom:before, .tip-bottom:after {
|
|
content: "";
|
|
display: block;
|
|
border-width: 15px;
|
|
position: absolute;
|
|
bottom: -30px;
|
|
left: 100px;
|
|
border-style: solid dashed dashed solid;
|
|
border-color: #f99 transparent transparent transparent;
|
|
font-size: 0;
|
|
line-height: 0;
|
|
}
|
|
|
|
.tip-bottom:after {
|
|
bottom: -27px;
|
|
border-color: #0FF transparent transparent transparent;
|
|
}
|
|
|
|
/*左三角*/
|
|
.tip-left {
|
|
margin: 20px;
|
|
padding: 5px;
|
|
width: 300px;
|
|
height: 60px;
|
|
border: 2px solid #f99;
|
|
position: relative;
|
|
background-color: #FFF;
|
|
/*设置圆角*/
|
|
-webkit-border-radius: 5px;
|
|
-moz-border-radius: 5px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.tip-left:before, .tip-left:after {
|
|
content: "";
|
|
display: block;
|
|
border-width: 15px;
|
|
position: absolute;
|
|
left: -30px;
|
|
top: 20px;
|
|
border-style: dashed solid solid dashed;
|
|
border-color: transparent #f99 transparent transparent;
|
|
font-size: 0;
|
|
line-height: 0;
|
|
}
|
|
|
|
.tip-left:after {
|
|
left: -27px;
|
|
border-color: transparent #FFF transparent transparent;
|
|
}
|
|
|
|
/*右三角*/
|
|
.tip-right {
|
|
margin: 20px;
|
|
padding: 5px;
|
|
width: 300px;
|
|
height: 60px;
|
|
border: 2px solid #f99;
|
|
position: relative;
|
|
background-color: #FFF;
|
|
/*设置圆角*/
|
|
-webkit-border-radius: 5px;
|
|
-moz-border-radius: 5px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.tip-right:before, .tip-right:after {
|
|
content: "";
|
|
display: block;
|
|
border-width: 15px;
|
|
position: absolute;
|
|
right: -30px;
|
|
top: 20px;
|
|
border-style: dashed solid solid dashed;
|
|
border-color: transparent transparent transparent #f99;
|
|
font-size: 0;
|
|
line-height: 0;
|
|
}
|
|
|
|
.tip-right:after {
|
|
right: -27px;
|
|
border-color: transparent transparent transparent #FFF;
|
|
}
|
|
</style>
|