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

  <style>

       .wrap{

           width: 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{

          width: 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()}

to{transform:rotate(360deg)}

}

div{

    width: 100px;

    height: 100px;

    border: 1px solid;

    animation: rotating .2s linear infinite;

}

一些用Css实现的效果的更多相关文章

  1. css三级菜单效果

    一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  2. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  3. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  4. CSS 边框 阴影 效果

    CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...

  5. Css实现透明效果，兼容IE8

    Css实现透明效果,兼容IE8 >>>>>>>>>>>>>>>>>>>>> ...

  6. HTML与CSS简单页面效果实例

    本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...

  7. css 实现评分效果

    css实现评分效果,其实是css sprites (css精灵)的延伸应用,效果的实现主要是由  background-position 属性移动图片位置.之前看到有前辈写过关于这方面的内容,在理解上 ...

  8. 纯 CSS 实现波浪效果！

    一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...

  9. React 系列教程 1：实现 Animate.css 官网效果

    前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就 ...

  10. IE7,8纯css实现圆角效果

    众所周知,IE7,8不支持border-radius效果.但我们同样有办法用css实现这个效果,方法就是用border来模拟. <!DOCTYPE html> <html lang= ...

随机推荐

  1. Read The Docs搭建

    #!/bin/sh ########################### base ###################### yum -y update yum -y install yum-u ...

  2. 协程gevent

    协程,利用线程在等待其他资源期间去执行其他的函数. gevent里面封装了greenlet,greenlet里面封装了yield. from gevent import monkey import g ...

  3. js调试工具及微博登录分析

    js调试工具 网页 都是采用ajax  需要提交一些参数 断点 自己去直接断点 事件断点, network 方法 靠近边栏顶部的是Call Stack(调用堆栈)窗格.当代码在断点处暂停时,Call ...

  4. PROC IMPORT 选项

    GETNAMES=YES;导入源文件字段名作为SAS数据集的字段名MIXED=NO;若某一列中包含数值型和字符型变量,将数值型按照缺省值处理.若选的是YES则是将数值型转换成字符型存储,默认为NOSC ...

  5. windows环境 springboot+docker开发环境搭建与hello word

    1,下载安装 docker toolbox 下载地址:http://mirrors.aliyun.com/docker-toolbox/windows/docker-toolbox/ docker t ...

  6. C#6.0新语法

    .自动属性初始化的改进(有用) 原来的用法(声明时无法同时初始化),例如: class MyClass { public int Age { get; set; } public string Nam ...

  7. 洛谷题解 CF807A 【Is it rated?】

    同步题解 题目 好吧,来说说思路: 1.先读入啦~(≧▽≦)/~啦啦啦 2.判断a[i]赛前赛后是否同分数,如果分数不同,则输出,return 0 . 3.如果同分数,则判断a[i]赛前(或赛后)是否 ...

  8. C语言的“编译、链接”

    我们写的代码,仅仅是文本文件(txt),不管后缀怎么变,终究是文本文件,计算机只能显示,不能做事(执行). 文本文件通过“编译.链接”,成为可执行文件(windows下是exe): 编译:生成.o文件 ...

  9. Java异常处理——受控（checked）的异常（throws语句）

    受控与不受控的异常 1.throws语句中声明的异常称为受控(checked)的异常,通常直接派生自Exception类. 2.RuntimeException(其基类为Exception) 和Err ...

  10. Koa2

    安装 yarn add koa 代码 Koa的核心代码就三行 const app = new Koa() app.use(middleware) app.listen(3000) const Koa ...