京东,淘宝,易迅三大网站是如何用CSS绘制三角形的

最新推荐文章于 2022-07-13 20:52:44 发布

webmxj

最新推荐文章于 2022-07-13 20:52:44 发布

阅读量500

点赞数 2

分类专栏： css 文章标签： css 三角形标签

本文链接：https://blog.csdn.net/div_ma/article/details/65626600

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

京东,淘宝,易迅三大网站是如何绘制三角形的,

1,淘宝上直接利用边框的方法来制作三角形,

首先我们需要利用边框来制作一个四边形,一个标签如div,

然后设置,宽高零,四条边框为实线长度相等,效果如下:

<!DOCTYPE html>
<html>
   <head>
       
       <meta charset="UTF-8">
       <title></title>
       <style>
           div{
           width:0;
           height:0;
           border-left:50px solid red;
           border-right:50px solid yellow;
           border-top:50px solid orange;
           border-bottom:50px solid skyblue;
           }
       </style>
   </head>
   <body>
       <div></div>
   </body>
</html>

效果如下:

接着我们需要保留需要需要的三角形隐藏不需要的边框比如说我们需要向下的三角形,

如下所示

<!DOCTYPE html>
<html>
   <head>
       
       <meta charset="UTF-8">
       <title></title>
       <style>
           div{
           width:0;
           height:0;
           border-left:50px solid transparent;
           border-right:50px solid transparent;
           border-top:50px solid orange;
           border-bottom:50px solid transparent;
           }
       </style>
   </head>
   <body>
       <div></div>
   </body>
</html>

效果如下三角形的效果就处理了然后通过定位去放置三角形的位置就可以了.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

2.京东上三角形的做法

京东的做法与淘宝的做法不同需要用到特殊符号◇ 这个符号在输入法中可以找到我用的是搜狗其他的应该也有

ctrl+shift+快捷键然后选择特殊符号就有了;

然后建立父子两个标签,父标签设置想要的宽高, 子标签插入想要的符号并通过改变字体大小去改变符号大小;

代码如下:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           .box{
               width:50px;
               height:50px;
               border:1px solid red;

           }
           .sanjiao{
               font-size:50px;

           }
       </style>
   </head>
   <body>
       <div class="box">
       <p class="sanjiao">◇</p>
       </div>
   </body>
</html>

然后通过绝对定位改变符号的位置子绝父相的原理在父标签设相对定位, 并设置overflow:hidden;隐藏符号超出的部分;

代码如下:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           .box{
               width:50px;
               height:50px;
               border:1px solid red;
               overflow:hidden;
               position:relative;
           }
           .sanjiao{
               font-size:50px;
               position:absolute;
               top:-27px;
               left:-1px;
           }
       </style>
   </head>
   <body>
       <div class="box">
       <p class="sanjiao">◇</p>
       </div>
   </body>
</html>

效果如下:

最后把父标签的边框隐藏就好了;

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

3.易迅网制作三角形的方法;

易迅网制作方法与淘宝网的制作方法类似都是用边框来做只不过它是用两个三角形叠加,覆盖来做这里的两个三角形直接复制淘宝的代码就好了; 然后通过绝对定位和相对定位去给三角形确定位置

代码如下:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>

       .one{
           width:0;
           height:0;
           border-left:50px solid transparent;
           border-right:50px solid transparent;
           border-top:50px solid orange;
           border-bottom:50px solid transparent;
           position:relative;

       }
       .two{
           width:0;
           height:0;
           border-left:50px solid transparent;
           border-right:50px solid transparent;
           border-top:50px solid red;
           border-bottom:50px solid transparent;
           position:absolute;
           top:-65px;
           left:-51px;

       }
       </style>
   </head>
   <body>
       <div class="father">
           <div class="one">
               <div class="two"></div>
           </div>
       </div>
   </body>
</html>

效果如下:

然后将子标签.two的里面边框的颜色设置为背景色白色

效果如下:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

最后的重点如何改变三角形的方向.

使用一个盒子将三角型包裹起来然后通过transform:rotate();这个标签去旋转三角形值得一提的是盒子一定要宽高在()中填写想要旋转的角度;

代码如下:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
       .father{
           width:100px;
           height:100px;
           transform:rotate(-90deg);
       }
       .one{
           width:0;
           height:0;
           border-left:50px solid transparent;
           border-right:50px solid transparent;
           border-top:50px solid orange;
           border-bottom:50px solid transparent;
           position:relative;

       }
       .two{
           width:0;
           height:0;
           border-left:50px solid transparent;
           border-right:50px solid transparent;
           border-top:50px solid #fff;
           border-bottom:50px solid transparent;
           position:absolute;
           top:-65px;
           left:-51px;

       }
       </style>
   </head>
   <body>
       <div class="father">
           <div class="one">
               <div class="two"></div>
           </div>
       </div>
   </body>
</html>

效果如下:

淘宝和京东的三角形旋转的原理相同, 在这里就不一一展示了;

第一篇文章,可能描述的不够清楚如果有不懂的可以发私信或发邮件到mxuejian@foxmail.com;我们互相探讨下一起成长.

webmxj

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
京东,淘宝,易迅三大网站是如何用CSS绘制三角形的

京东,淘宝,易迅三大网站是如何绘制三角形的,1,淘宝上直接利用边框的方法来制作三角形,首先我们需要利用边框来制作一个四边形,一个标签如div,然后设置,宽高零,四条边框为实线长度相等,效果如下: div{ width:0;
复制链接

扫一扫