<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

.box {

width: 900px;

height: 50px;

background: linear-gradient(-145deg, transparent 11px, #0b2b5f 0) right, linear-gradient(145deg, transparent 11px, #0b2b5f 0) left;

background-size: 50% 100%;

background-repeat: no-repeat;

}

</style>

</head>

<body>

<div class="box"></div>

</body>

</html>

 同理一个菱形是

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

.box {

width: 900px;

height: 50px;

background：linear-gradient( -47deg, transparent 34px, #0b2b5f 0) right, linear-gradient( 137deg, transparent 34px, #0b2b5f 0) left;
background-size: 50% 100%;

background-repeat: no-repeat;

}

</style>

</head>

<body>

<div class="box"></div>

</body>

</html>

CSS写一个缺角的div和菱形的更多相关文章

  1. 如何用css写一个带斜切角、有边框又有内外阴影的按钮呢？

    如果有一天,UI设计师丢过来一张UI稿,上面有这样一个带有斜切角.有边框还有内外阴影的按钮,你会怎么实现呢?第一反应切图?可是按钮内容.大小都是可变的,那得切多少图啊~Canvas?SVG?No,no ...

  2. 还在为小三角形切图？使用纯CSS写一个简单的三角形

    同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;displ ...

  3. 玩玩CSS,写一个图标堆叠效果

    遇到有人问如下效果怎么写,一时兴起,自己写一个玩玩. 看到这个样子,首先应该考虑一下 DOM 结构,以我的观点,把DOM结构设计为如下形式: <div> <img src=" ...

  4. CSS写一个圣诞树Chrome浏览器小插件

    一时兴起,突然想写一个Chrome浏览器插件,不知道写啥,就写了一个圣诞树小插件.项目源码>> Chrome浏览器插件 Chrome浏览器插件最主要的是:index.html.manife ...

  5. 纯css写一个大太阳的天气图标

    效果 效果图如下 ​ 实现思路 div实现太阳的一条矩形光影 before伪元素制作另一条光影矩形,和已有的转变90° after伪元素画个圆实现太阳样式 dom结构 用两个嵌套的div容器,父容器来 ...

  6. css写一个梯形

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>D ...

  7. Java-Web 用html和css写一个EasyMall注册界面

    要求: html代码: <!DOCTYPE html> <html> <head> <title>EasyMall注册页面</title> ...

  8. 用html和css写一个头部header和左侧菜单栏menu-bar固定的的页面

    这个页面header部分是100%的宽度,60px的高度,左侧是刚好一屏的高度,180的宽度,右侧的部分把剩余的空间占满,刚开始的时候还没怎么接触这样的页面,以为使用js读取浏览的可视化宽高,然后在做 ...

  9. 用html，CSS 写一个静态的博客网页

    <!doctype html> <html> <br/><br/><br/> <head> <meta http-equi ...

随机推荐

  1. 嵌入式Linux可用的防火墙——iptables：实现ip白名单、mac地址白名单

    iptables是linux系统下的一个功能强大的模块,不仅可以用作防火墙,还可以实现NAT等众多路由功能.iptables的容器有很清晰的层次关系: 1. iptables是表的容器,iptable ...

  2. DVWA靶场之Brute Force（暴破）通关

    DVWA最经典PHP/MySQL老靶场,简单回顾一下通关流程吧 DVWA十大金刚,也是最常见的十种漏洞利用:Brute Force(暴破).Command Injection(命令行注入).CSRF( ...

  3. redis的过期策略和淘汰策略

    过期键删除策略 1.定时删除:在设置键的过期时间的同时,创建一个定时器timer,让定时器在键过期时间来临时,立即执行对键的删除操作. 2.惰性删除:放任键过期不管,但是每次从键空间中获取键时,都检查 ...

  4. Quartz任务调度(2)CronTrigger定制个性化调度方案

    Cron表达式 1. 时间字段与基本格式 Cron表达式有6或7个空格分割的时间字段组成: 位置 时间域名 允许值 允许的特殊字符 1 秒 0-59 ,-*/ 2 分支 0-59 ,-*?/ 3 小时 ...

  5. 如果服务器数据更新了，CDN的数据是怎么及时更新的

    A:cdn一般用来存静态资源.拿网站来说,当用户访问网站时静态资源从cdn加载.cdn向后段源服务器请求资源并缓存,这个请求过程是周期性的,自动的,称为回源. 当你更新了一个文件,现在正巧还没到cdn ...

  6. 接上一篇安装linux问题，解决redis安装后make test错误

    (file "tests/helpers/bg_complex_data.tcl" line 10) Killing still running Redis server 3987 ...

  7. mybatis插值，数据提交事务回滚数据库值为空

    mybatis插值,数据提交事务回滚数据库值为空 通过sql日志查看sql为:INSERT INTO `quanxian`.`user` ( phone, email, password, times ...

  8. indexedDB数据库完整创建流程

    1.打开数据库 使用 IndexedDB 的第一步是打开数据库,使用indexedDB.open()方法 var request = window.indexedDB.open(databaseNam ...

  9. 高德地图——2D转换3D

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script ty ...

  10. MySQL-库表操作详述

    一.库操作 创建库 create database 库名(charset utf8 对库的编码进行设置,不写就用默认值) 库名可以由字母.数字.下划线.特殊字符,要区分大小写,唯一性,不能使用关键字, ...