-5
A
回答
0
您可以使用div
或任何其他元素作为文本框。然后通过使用:before
类,结合透明边框(三面),可以创建一个箭头。
更多信息,可以发现here
div {
position: relative;
background: lightblue;
width: 200px;
height: 100px;
}
div:before {
position: absolute;
right: 100%;
top: 10px;
content: " ";
height: 0;
width: 0;
border: 10px solid lightblue;
border-color: transparent lightblue transparent transparent;
}
<div>Textbox with arrow</div>
0
我将介绍你看中的解决方案:
.box{
position: relative;
height: 400px;
width: 500px;
background-color: #ccc;
border: 2px solid orange;
margin: 50px 0 0 50px;
}
.box::after{
content: " ";
width: 20px;
height: 20px;
position: absolute;
top: 10px;
left: -12px;
border-top: 2px solid #FFA500;
border-left: 2px solid #FFA500;
z-index: 1000;
background: linear-gradient(-45deg, rgba(255,255,255,0) 12px, #CCC 12px);
transform: rotate(-45deg);
}
相关问题
- 1. CSS transparant右上角三角形边框
- 2. 带三角形边框的JPanel
- 3. 带白色边框的三角形
- 4. 三角形边框
- 5. 边框角落:三角形
- 6. 具有圆形边框(不是角落)的CSS三角形
- 7. CSS边框 - 不带边角的框
- 8. 带边框的Css圆角
- 9. 多边形三角成三角形条带的OpenGL ES
- 10. 带圆角的css三角形图像?
- 11. 带圆角的三角形,用CSS
- 12. 具有边框半径和三角形边的CSS项目
- 13. 带孔的多边形三角网
- 14. 如何制作凹左边框的三角形三角形?
- 15. 三角形中的三角形CSS
- 16. 垂直居中三角形形状(CSS边框黑客)
- 17. 带边框的透明三角
- 18. 三角形边框的渐变效果
- 19. 半三角形CSS与边境半径
- 20. 按钮右边有一个圆形的CSS三角形边?
- 21. 在透明底部边框的div顶部的CSS三角形
- 22. CSS三角边境
- 23. div上的三角形css边框滚动
- 24. 边框周围的气泡+箭头(三角形)在css
- 25. 将边框添加到CSS三角形的两侧?
- 26. 在图像上方的CSS三角形边框
- 27. 边框顶部的阴影和三角形向下在css
- 28. osmdroid多边形 - 三角形
- 29. 多边形三角形c#
- 30. 带三角形边框的箱形阴影创建雪佛龙形div div
https://jsfiddle.net/kpe1k8p9/ – Jay
你应该为你的尝试提供一个例子 – fcalderan