<!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. 关于下载远程文件为未知文件.txt的解决方法

    本地下载文件后缀正常,服务器下载文件后缀都为.txt的解决方法: 后缀为 未知文件.txt 的原因为前端无权限获取Content-Disposition中的文件名 response.setHeader ...

  2. 题解 P3322 [SDOI2015]排序

    题解 仔细审题,我们会发现 小 \(A\) 认为两个操作序列不同,当且仅当操作个数不同,或者至少一个操作不同(种类不同或者操作位置不同). 所以,对于一种操作,不管是交换哪两段,都算作同一种操作,只会 ...

  3. idea中导包出现import org.apach.*，提交代码老出现冲突，不想使用.*的设置

    打开设置>Editor>Code Style>Java>Scheme Default>Imports ① 将Class count to use import with ...

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

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

  5. uwp 之语音朗读

    xml code --------------------------------- <Page x:Class="MyApp.MainPage" xmlns="h ...

  6. 你不知道的echarts，前端鲍哥带你研究！

    前言 相信不少前端小伙伴刚接触 e-charts 肯定有点陌生,但是echarts咱不清楚,charts我们应该很熟悉,没错,echarts 就是我们日常可见的图表,不同的是 echarts 是用代码 ...

  7. 设置 ajax 同步获取数据

    问题 在处理DataTable的render进行列表渲染的时候发现通过ajax发送请求,返回的值并不正确. {"data":"id","render& ...

  8. zabbix告警推送至个人微信

    文章原文 自从接触zabbix后,就一直想着怎么才能把告警推送到个人微信上.有这样的想法主要是个人微信的使用频率远远要比钉钉,企业微信,邮箱,飞书等使用频率要高.比如我,就遇到过在周末的时候,因为没有 ...

  9. TOMCAT WEB请求乱码

    post乱码: 原因: ​ 对于POST方式,它采用的编码是由页面来决定的即ContentType("text/html; charset=GBK").当通过点击页面的submit ...

  10. Redis的持久化机制与内存管理机制

    1.概述 Redis的持久化机制有两种:RDB 和 AOF ,这两种机制有什么区别?正式环境应该采用哪种机制? 我们的服务器内存资源是有限的,如果内存被Redis的缓存占满了怎么办?这就要看Redis ...