[英]Can I create an arrow using background only?
我正在尋找一種僅使用css背景創建箭頭的方法。
在我的情況下,這是用於選擇下拉列表的,因此不能使用選擇不支持的偽元素。
我知道,如果不能僅使用背景,可以使用canvas實現此目的- 將<canvas>用作CSS背景
如果要使用background
,則可以使用linear-gradient
。
div { width: 40px; height: 18px; background: linear-gradient(45deg, black 25%, transparent 25%, transparent), linear-gradient(-45deg, black 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, black 75%), linear-gradient(-45deg, transparent 75%, black 75%); background-position: 20px 0; background-size: 40px 35px; }
<div></div>
如果您想要大於或小於符號的東西,請使用svg
。
<!--'Greater than' sign--> <svg width="40" height="50" viewBox="0 0 42 52"> <path d="M0,0 l40,25 l-40,25" fill="none" stroke="black" /> </svg> <!--'Less than' sign--> <svg width="40" height="50" viewBox="0 0 42 52"> <path d="M40,0 l-40,25 l40,25" fill="none" stroke="black" /> </svg> <!--'Greater than' sign - Thick stroke--> <svg width="40" height="50" viewBox="0 0 42 53"> <path d="M0,0 l40,25 l-40,25" fill="none" stroke="black" stroke-width="3" /> </svg> <!--'Greater than' sign - Thick stroke--> <svg width="40" height="50" viewBox="-2 0 42 52"> <path d="M40,0 l-40,25 l40,25" fill="none" stroke="black" stroke-width="3" /> </svg>
另外,看看: 使用svg
作為background-image
。
您也可以只使用▼字符,或者
<span class="caret"></span>
-根據要求添加
<select class="form-control">
<option default disabled="disabled" >choose ▼</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.