html+css怎么写出“分享到”前面的小箭头？

html-css025

html+css怎么写出“分享到”前面的小箭头？,第1张

如果要写的话也是可以的，但是一般情况下没有人会去浪费时间在这个图标上，一般直接通过切图用图片代替，获取使用字体图标，如果要写的话就是一个蓝色的圆然后再有一个白色的圆盖住它的大部分，最后一个三角形定位，最后拼出来，这样下来就很浪费时间，如果是使用图片，直接设置一个宽，然后做图片自适应就可以了

<div class="styled-select">

    <select>

        <option>Here is the first option</option>

        <option>The second option</option>

    </select>

</div>

//下拉箭头保持不变。没有直接美化它的方式，但解决方案还是非常简单的，首先我们需要用一个div容器包裹在select元素外围

.styled-select {

   width: 240px

   height: 34px

   overflow: hidden

   background: url(new_arrow.png) no-repeat right #ddd

}

/*下一步我们需要加入一些css，以确保选择框元素被以某种方式美化：

我们需要确保选择框的跨度比外围的div容器更宽，这样默认的下拉箭头就会消失（选择框比外面的div宽大，默认的下拉箭头就会被隐藏）

我们的div容器需要被美化成新的下拉箭头出现在我们预想的位置

就是用图片把原下拉箭头覆盖

*/

.styled-select select {

   background: transparent

   width: 268px

   padding: 5px

   font-size: 16px

   border: 1px solid #ccc

   height: 34px

   -webkit-appearance: none /*for chrome*/

}