平常我们一般有图片的地方。我们都会用图片代替。可是往往很多东西,我们是可以手绘出来的
1.气泡css的写法
html:
<div class="dialogue">
<div class="arrow">
<em></em>
<span class="triangle"></span>
</div>
<p class="question-content">如果人类没有语言,还会思考吗?</p>
</div>
css:
.dialogue {
margin-left: 3rem;
border: 1px solid #d1d1d1;
padding: .5rem;
position: relative;
background-color: #FFF;
border-radius: 10px;
}
.arrow {
position: absolute;
width: 1.25rem;
height: 2.0rem;
left: -1.65rem;
top: 10%;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
.arrow em {
border-color: #d1d1d1 transparent transparent;
}
.arrow * {
display: block;
border-width: 0.6rem;
position: absolute;
border-style: solid dashed dashed dashed;
font-size: 0;
line-height: 0;
}
span.triangle {
border-color: #FFF transparent transparent;
top: -1px;
}
效果如图:
2.手绘放大镜
html:
<body>
<div class="magnifier"></div>
</body>
css部分:
<style>
.magnifier {
width: 50px;
height: 50px;
border-radius: 50%;
border: 5px solid #333;
position: relative;
}
.magnifier::after {
content: '';
display: block;
width: 8px;
height: 60px;
border-radius: 5px;
background: #333;
position: absolute;
right: -22px;
top: 38px;
transform: rotate(-45deg);
}
</style>
效果图如下: