<!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. noip18

    T1 来自cf原题 考场直接暴力枚举 \(A,B\),15pts. 正解: 首先时间的表达式,\(T=\frac{A}{a_{i}}+\frac{B}{b_{i}}\),然后以\(\frac{1}{a ...

  2. flutter查看安全码SHA1

    最近flutter技术调研高德地图插件时,要用到安全码,可以打开cmd,键入一下命令查看.(注意路径用户名yourusernamehere改为自己的) keytool -list -v -keysto ...

  3. 因为手机设置字体大小导致h5页面在webview中变形的BUG

    出现这个问题,有以下因素 你的页面采用了rem单位,并且是采用js动态计算html的font-size你的页面被加在了APP中的webview中这该死的手机被重设了字体大小解决方法一般,我们动态计算好 ...

  4. jvm系列(五):jvm调优-从eclipse开始

    概述 什么是jvm调优呢?jvm调优就是根据gc日志分析jvm内存分配.回收的情况来调整各区域内存比例或者gc回收的策略:更深一层就是根据dump出来的内存结构和线程栈来分析代码中不合理的地方给予改进 ...

  5. Javascript - Vue - webpack中的axios

    导入axios import Vue from "vue";import axios from "axios";import { get } from &quo ...

  6. centos7 添加磁盘到/(根目录下)，扩展VG卷和lv

    转载自:http://blog.itpub.net/25469263/viewspace-2662215/ centos7中使用vg方式扩充root分区 1.创建pv fdisk /dev/sdb 输 ...

  7. servlet初识servletConfig

    package day09; import java.io.BufferedReader; import java.io.FileReader; import java.io.IOException; ...

  8. 使用dom4j工具：XMLWriter写出文件（五）

    package dom4j_write; import java.io.File; import java.io.FileOutputStream; import java.io.OutputStre ...

  9. ubuntu中用update-alternatives进行软件多版本设置、切换，以python配置为例

    以Python2.7和Python3.5设置为例: 在系统中添加Python2.7.Python3.5的选项,默认为Python3.5 sudo update-alternatives --insta ...

  10. Ubuntu16.04 Linux 下无痛安装、配置Gogs

    本文在Win7+VMware的ubuntu 16.04中测试,安装Gogs,Install from binary. 准备工作: sudo apt-get install git sudo addus ...