Heim > Web-Frontend > HTML-Tutorial > css制作三角形,下拉框三角形_html/css_WEB-ITnose

css制作三角形,下拉框三角形_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:37:23
Original
1917 Leute haben es durchsucht

网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用css制作三角形放在矩形上面

首先利用css制作三角形

    div {        width:0px;        height:0px;        border-top:20px solid transparent;        border-left:20px solid transparent;        border-right:20px solid transparent;        border-bottom:20px solid green;       }
Nach dem Login kopieren

<div></div>
Nach dem Login kopieren

然后就是将这个三角形放到矩形上面注意这里如果想要箭头朝向哪边就将哪边的颜色显示,其余用透明就行

div {    width:150px;    height:150px;    position:relative;    margin:50px auto;}div p {    border:1px solid #000;    width:100px;    height:100px;}div span {    display:block;    width:0px;    height:0px;    border-top:20px solid transparent;    border-left:20px solid transparent;    border-right:20px solid transparent;    border-bottom:20px solid black;    position:absolute;    top:-40px;    left:0;}div span.blank {    border-top:19px solid transparent;    border-left:19px solid transparent;    border-right:19px solid transparent;    border-bottom:19px solid white;    top:-37px;    left:1px;}
Nach dem Login kopieren

 

这个具体数值大家可以看情况在进行调节!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage