自我评价:走在路上的菜鸟,想着CMS|WEB|SEO,做着可以成为牛掰程序seoer的梦!

当前位置:博客 > 前端开发 > HTML|CSS代码 >

border制作小箭头的技巧(面试题)

作者:灰牛站长•发布时间:2021-07-12 09:32:57•浏览

不切图片的情况下如何制作箭头和小三角形的形状(面试题)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.arrow{
width: 20px;
height: 20px;
border-top: 1px solid red;
border-left: 1px solid red;
transform: rotate(45deg);
margin: 50px 0 0 50px;
}
</style>
</head>
<body>
<div class="arrow"></div>
</body>
</html>

如上代码,三角形箭头原理:正方形的任意相邻的两边线然后旋转一定的角度,得到我们需要的任意方向的箭头,deg角度单位,rotate旋转角度.

  1. 小三角形的大小由正方形的宽高去控制
  2. 小三角形的粗细由border边框线的宽度去控制
  3. 小三角形的颜色由border边框线的颜色去控制

相关文章

  • 雪碧图的使用和制作技巧

    雪碧图的使用和制作技巧

    background-position背景定位 background-position属性设置背景图像的起始位置; xpos ypos第一个值是水平位置,第二个值是垂直。左上角是0。单位可以是长度值px,关键字...
    2021-07-12 10.07.36
  • background-size设置背景图像的尺寸大小

    background-size设置背景图像的尺寸大小

    background-size设置对象的背景图像的尺寸大小 length用长度值指定背景图像大小,不允许负值;=background-size:X轴尺寸大小 Y轴尺寸大小 percentage用百分比指定背景图...
    2021-07-12 10.07.32
  • border制作三角形的技巧(面试题)

    border制作三角形的技巧(面试题)

    !DOCTYPE htmlhtmlheadmeta charset="utf-8"title/titlestyle.triangle{width: 0px;height: 0px;border-width: 100px;border-style: solid;border-color: red green blue yellow;}.triangle{width: 0px;height: 0px;b...
    2021-07-12 09.07.36
  • css盒子模型之边框线border的使用技巧

    css盒子模型之边框线border的使用技巧

    !DOCTYPE htmlhtmlheadmeta charset="utf-8"title/titlestyle type="text/css"*{margin: 0;padding: 0;}.content{width: 100px;height: 100px;background-color: darkgoldenrod;/* border: 10px solid #000; */border...
    2021-07-12 09.07.37

手机端