一些用Css实现的效果

今天写一个笔试题,其中有一个是用css实现直角梯形的效果,我给出的答案是:

  <style>
       .wrap{
            100px;
           height: 50px;
           border-top:90px solid transparent;  
           border-left:90px solid #ffff00;  
       }
   
    </style>
</head>
<body>
    <div class="wrap">
    </div>  

然后顺带回顾一下设置三角形的原理

1.首先设置宽和高为0

2.然后给边框加上宽高和相应颜色

<style>
       .wrap{
           0px;
           height: 0px;
           border-right:100px solid transparent;  
           border-left:100px solid transparent;  
           border-bottom:100px solid #ffff00;  
       }
   
    </style>
</head>
<body>
    <div class="wrap">
    </div>

 拼多多二面让我写一个菊花的loading,我写不来,估计是凉了(心累了),先从一个css3的选择效果做起

<div></div>
@keyframes rotating{
    from{transform:rotate(0)}
to{transform:rotate(360deg)}
}
div{
     100px;
    height: 100px;
    border: 1px solid;
    animation: rotating 1.2s linear infinite;
}
原文地址:https://www.cnblogs.com/yuan233/p/10459444.html