<!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. 暴力破解 安鸾 Writeup

    前三题可以使用hydra进行破解 hydra使用教程 https://www.cnblogs.com/zhaijiahui/p/8371336.html D:\soft\hydra-windows&g ...

  2. wait notify的使用

    1.wait().notify/notifyAll() 方法是Object的本地final方法,无法被重写. 2.wait()使当前线程阻塞,前提是 必须先获得锁,一般配合synchronized 关 ...

  3. SpringCloud升级之路2020.0.x版-23.订制Spring Cloud LoadBalancer

    本系列代码地址:https://github.com/HashZhang/spring-cloud-scaffold/tree/master/spring-cloud-iiford 我们使用 Spri ...

  4. bootstrap 冻结表格，冻结表头

    需要的文件下载: bootstrap-table:https://github.com/wenzhixin/bootstrap-table bootstrap-table-fiex-column:ht ...

  5. C语言预处理编译链接各个阶段错误，分阶段的说一下

    C语言预处理编译链接各个阶段错误,分阶段的说一下 C语言预处理编译链接各个阶段错误,分阶段的说一下比如指针异常,数组下标越界什么的    我来答 1个回答 #热议# 你觉得这辈子有希望看到996消失 ...

  6. WPF---样式（一）

    一.概要 Style通俗的讲,就是一组Setter,设置目标控件的一些属性,便于复用. 注:如果一个属性在控件本身进行了设定,那么Style中的对应属性值会被覆盖掉. 二.命名样式和目标样式 命名样式 ...

  7. jQuery中ajax请求的六种方法（三、三）：$.post()方法

    3.$.post()方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  8. rasa form的中断形式 自然机器语言学习 人工智能

    Forms形式 最常见的对话模式之一是从用户那里收集一些信息以便做某事(预订餐厅.调用 API.搜索数据库等).这也称为**槽填充**. 用法# 要在 Rasa Open Source 中使用表单,您 ...

  9. 【图像处理】使用SDL预览webp图片

    写在前面的话 WebP是Google开发的一种图像格式,支持图像数据的有损和无损压缩.保留动画和alpha透明通道数据. 可以创建和JPEG.PNG和GIF图像格式在质量相同或质量更高,但是数据更小的 ...

  10. MongoDB（3）- Database 数据库相关

    Database MongoDB 将数据记录存储为文档(特别是 BSON 文档) 这些文档在集合中聚集在一起 数据库存储一个或多个文档集合. 在 MongoDB 里面存在数据库的概念,但没有模式 Sh ...