CSS写一个缺角的div
今天用CSS写一个缺角的div,大致的效果是这样的,div的左上角和右上角缺掉了一块的效果,简称为缺角div
<!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>
原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚,欢迎关注【编程微刊】公众号,回复【领取资源】,500G编程学习资源干货免费送。
CSS写一个缺角的div相关推荐
- 如何用CSS写一个缺角的div(附源码)
今天用CSS写一个缺角的div,大致的效果是这样的,div的左上角和右上角缺掉了一块的效果,简称为缺角div <!DOCTYPE html> <html lang="en& ...
- [css] 写一个动画,向上匀速移动100px,向下以1.5倍速度移动200px,一直反复循环
[css] 写一个动画,向上匀速移动100px,向下以1.5倍速度移动200px,一直反复循环 .animation-block {width: 50px;height: 50px;backgroun ...
- 基于JavaScript+css写一个简单的h5动态下雨效果
基于JavaScript+css写一个简单的h5动态下雨效果 文章目录 什么是前端 展示效果 JavaScript是什么? 步骤 1.html 2.css 3.js 什么是前端 前端它是一个工作,它的 ...
- 用Html+css写一个渐变背景的个人名片
原文地址:10分钟用Html+css写一个渐变背景的个人名片_网页制作_青青个人博客 个人名片在个人博客网站上的位置一般是在首页右上角,一点开网站就能看见,信息量并不多,但是对于访客说,可以直观快速的 ...
- 教你用 css 写一个拟物化图标
拟物化(Skeuomorphism)风格的图标在iOS7发布之前广为流行.相当长一段时间,无论系统.网页还是第三方应用都争相使用拟物化的设计风格.那时候的dribbble网,各色优秀的拟物化设计作品也 ...
- 用HTML、CSS写一个酷炫的动态搜索框
用HTML.CSS写一个酷炫的动态搜索框 可伸展的动态搜索框! 复制粘贴即可用! HTML部分: <!DOCTYPE html> <html lang="en"& ...
- [css] 使用css写一个红绿灯交替的动画效果
[css] 使用css写一个红绿灯交替的动画效果 <!DOCTYPE html> <html lang="en"><head> <meta ...
- android三角形切图软件,还在为小三角形切图?使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 .icon{width:20px;height:20px;display:block;margi ...
- [css] 请使用css写一个多级的下拉菜单
[css] 请使用css写一个多级的下拉菜单 <!DOCTYPE html> <html lang="en"><head><meta ch ...
最新文章
- Android开发——Android中常见的4种线程池(保证你能看懂并理解)
- css兼容ie9 ie11,用webpack打包的css在ie9些有些css文件没有引进去是为什么 ie11可以...
- Sys和system用户、sysdba 和sysoper系统权限、dba角色的区别
- 使用CuteFTP登陆FTP(serv-U)服务器后无法LIST目录和文件的解决方法
- nodejs之express入门
- Zookeepe实践与应用--分布队列
- view [bootstrap-4] not found如何解决_Dubbo如何处理业务异常,这个一定要知道哦
- [MVC.NET] Asp.Net MVC3 简单入门第一季
- 无聊特意去拍月亮。呵呵
- A311D项目开发总结
- C# 自定义Json解析工具
- 数值计算方法”上机实验指导书——实验一 误差分析
- 番外9福冈·狂野老司机告诉你如果装AI·1· ——混合现实科幻《地与光》
- 全国全量企业工商数据分析报告1
- 统计基础:3.3_假设检验之t检验(Student‘s t test)
- 什么是软件危机?它有哪些典型表现?为什么会出现软件为危机?
- C语言实现简单的五子棋
- 工作时间如何安排:集中注意力的方法
- 项目上线前出Bug,测试人该如何调整心态
- python跳舞的线_舞蹈链(Dance Link X)算法详解及python实现
热门文章
- inventor导出tekla_保存和导出文件参考 | Inventor 2019 | Autodesk Knowledge Network
- 测试python安装成功时报错_移动测试之appium+python 环境安装(一)
- Android使用ImageLoader异步加载网络图片(一)读取单张图片
- swapface使用教程
- 【渝粤题库】陕西师范大学165207 人才测评 作业(专升本)
- 技嘉BXBT1900 无线网卡的miniPCIE接口转装msata/ngff sata盘
- 82567LM-3 网卡驱动
- 使用java来写一个游戏外挂-内存修改程序(辅助-开篇)
- git简介,git和SVN区别
- E-puck2机器人系列教程-5.查找使用的USB串行端口