css3如何制作箭头

 时间:2024-10-13 02:21:35

1、首先打开Dreamweaver,Dreamweaver是我们最早接触的网页编辑软件,很适合新手。

css3如何制作箭头

3、建好文档后,我们首先在<head></head>里面写上样式,这里拿向上的三角形为例子,样式如下<style>.allarrow{width:500px; height:250px; margin:0 auto; margin-top:10%;}.arrow {width: 40px;height: 40px;position: relative; display: inline-block; margin: 10px 10px;}.arrow:before, .arrow:after {content: '';border-color: transparent;border-style: solid; position: absolute;}.arrow-up:before { border: none;background-color: #f00;height: 300%;width: 30%; top: 50%; left: 35%;}.arrow-up:after {left: 0;top: -50%;border-width: 20px 20px 20px 20px ; border-color:transparent transparent #f00 transparent;}</style>

css3如何制作箭头

5、写好之后,我们在浏览器中查看,效果如下所示。

css3如何制作箭头
  • Dreamweaver开启临时文件预览方法介绍
  • Dreamweaver网页制作教程:[1]站点的创建
  • Dreamweaver如何给网页添加背景音乐媒体
  • Dreamweaver CS6如何应用:[42]弹出信息
  • 《Dreamweaver 8网页设计》:[22]图文排列
  • 热门搜索
    浙江 旅游 旅游的说说心情朋友圈 普洱旅游 云南普者黑旅游攻略 去土耳其旅游多少钱 江苏旅游地图 白俄罗斯旅游 承德避暑山庄旅游攻略 湖北省旅游局 阳江旅游景点