css怎么产生带向下箭头的提示框

html-css025

css怎么产生带向下箭头的提示框,第1张

并非是CSS制作的,而是HTML的表单当中的下拉菜单标签

比如

<select>

<option>HTML5学堂</option>

<option>原创技术文章分享</option>

</select>

如果你不希望使用系统自定义的下拉菜单,那么,你需要使用各种元素(比如div),进行定位等处理,实现想要的样式,再之后,需要使用JS进行控制

使用CSS制作小三角形实际就是通过控制块元素的边框来实现的。

例如:

<style>

.triangle-up {

    width: 0

    height: 0

    border-left: 50px solid transparent

    border-right: 50px solid transparent

    border-bottom: 100px solid red

}

.triangle-down {

    width: 0

    height: 0

    border-left: 50px solid transparent

    border-right: 50px solid transparent

    border-top: 100px solid red

}

.triangle-left {

    width: 0

    height: 0

    border-top: 50px solid transparent

    border-right: 100px solid red

    border-bottom: 50px solid transparent

}

.triangle-right {

    width: 0

    height: 0

    border-top: 50px solid transparent

    border-left: 100px solid red

    border-bottom: 50px solid transparent

}

</style>

<div class='triangle-down'></div> <!--向下三角形-->

<div class='triangle-up'></div> <!--向上三角形-->

<div class='triangle-left'></div> <!--向左三角形-->

<div class='triangle-right'></div> <!--向右三角形-->

原理就是设置块元素的三条边透明掉(tranparent)