<!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. JVM-初见

    目录 JVM的体系结构 类加载器 双亲委派机制 Native PC程序计数器 方法区(Method Area) 栈 堆 调优工具 常见JVM调优参数 常见垃圾回收算法 引用计数算法 复制算法 标记-清 ...

  2. VLAN-3 Hybrid接口应用

    一.实验拓扑图 二.实验编址 三.实验步骤 1.给对应的PC设置对应的IP和掩码还有接口,以及根据需要划分不同的vlan区域,再用文本标记出不同部门. 2.启动设备(全选) 3.首先用ping命令检查 ...

  3. 轻量级状态管理库Pinia试吃

      最近连续看了几个GitHub上的开源项目,里面都用到了 Pinia 这个状态管理库,于是研究了一下,发现确实是个好东西!那么,Pinia 的特点: 轻量化 -- Pinia 体积约1KB,十分轻巧 ...

  4. NOIP 模拟 $27\; \rm 牛半仙的妹子图$

    题解 \(by\;zj\varphi\) 颜色数很少,考虑枚举颜色数. 建出来一棵最小生成树,可以证明在最小生成树上,一个点到另一个点的路径上的最大权值最小(易证,考虑 \(\rm kruskal\) ...

  5. Linux 分区扩容（根分区扩容，SWAP 分区扩容，挂载新分区为目录）

    请访问原文链接:https://sysin.org/blog/linux-partition-expansion/,查看最新版.原创作品,转载请保留出处. 作者:gc(at)sysin.org,主页: ...

  6. windows上解决git每次重复输入账号密码

    win7电脑: 1.在 C:\Users\Administrator 下 编辑 .gitconfig文件 2.在原有内容下添加一行(此行作用为自动保存,保存修改后再使用一次GIT,输入账号密码后下次即 ...

  7. QT5学习：分割窗口类的使用

    分割窗口在应用程序中经常用到,它可以灵活分布窗口布局,经常用于类似文件资源管理器的窗口设计中,然后抱着这样的想法简单的实现了下 [cpp]  view plain copy   //main.cpp ...

  8. iphdr结构

    包含在/usr/src/linux/include/linux/ip.h 1 struct iphdr { 2 #if defined(__LITTLE_ENDIAN_BITFIELD) 3 __u8 ...

  9. 后端开发应该掌握的Redis基础

    转自:https://juejin.im/post/5d078cd6f265da1b8466e62c 在上一篇文章中,我们简单地讲了一下Redis的应用场景.安装.如何连接等比较基础的知识,那么在这篇 ...

  10. 二、vue组件化开发（轻松入门vue）

    轻松入门vue系列 Vue组件化开发 五.组件化开发 1. 组件注册 组件命名规范 组件注册注意事项 全局组件注册 局部组件注册 2. Vue调试工具下载 3. 组件间数据交互 父组件向子组件传值 p ...