案例——京东三角+CSS三角形
案例：京东三角
1.效果图
2.代码参考
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS 三角制作</title><style>.box1 {width: 0;height: 0;/* border: 10px solid pink; */border-top: 10px solid pink;border-right: 10px solid red;border-bottom: 10px solid blue;border-left: 10px solid green;}.box2 {width: 0;height: 0;border: 50px solid transparent;border-left-color: pink;margin: 100px auto;}.jd {position: relative;width: 120px;height: 249px;background-color: pink;}.jd span {position: absolute;right: 15px;top: -10px;width: 0;height: 0;/* 为了照顾兼容性 */line-height: 0; font-size: 0;border: 5px solid transparent;border-bottom-color: pink;}</style></head><body><div class="box1"></div><div class="box2"></div><div class="jd"><span></span></div></body></html>CSS 三角强化 案例
1. 原理
<style>.box1 {width: 0;height: 0;/* 把上边框宽度调大 *//* border-top: 100px solid transparent;border-right: 50px solid skyblue; *//* 左边和下边的边框宽度设置为0 *//* border-bottom: 0 solid blue;border-left: 0 solid green; *//* 1.只保留右边的边框有颜色 */border-color: transparent red transparent transparent;/* 2. 样式都是solid */border-style: solid;/* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */border-width: 100px 50px 0 0 ;}</style></head><body><div class="box1"></div></body>2. 案例效果
3. 代码参考
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS三角强化的巧妙运用</title><style>.price {width: 160px;height: 24px;line-height: 24px;border: 1px solid red;margin: 0 auto;}.miaosha {position: relative;float: left;width: 90px;height: 100%;background-color:red;text-align: center;color: #fff;font-weight: 700;margin-right: 8px;}.miaosha i {position: absolute;right: 0;top: 0;width: 0;height: 0;border-color: transparent #fff transparent transparent;border-style: solid;border-width: 24px 10px 0 0;}.origin {font-size: 12px;color: gray;text-decoration: line-through;}</style></head><body><div class="price"><span class="miaosha">¥1650<i></i></span><span class="origin">¥5650</span></div></body></html>案例——京东三角+CSS三角形相关推荐
- (案例) 京东三角案例
代码 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8&qu ...
- html画一个倒三角,css 三角形画法
css 三角形画法 项目中,会有一些边角的位置使用的三角形的地方,这时候如果没有刻意改变,可使用 css 来实现. 使用 border 实现三角形的画法: triangle 实现 #triangle- ...
- html三角形图标,纯css三角形和css三角箭头实例代码
css箭头实例demo 纯css三角形和css三角箭头,可以随意放大缩小,可以随意颜色,这要比图片实现的三角箭头或者三角形状要灵活的多. 本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不 ...
- html div画三角,css画三角形
CSS三角形 .box { width: 100px; height: 100px; border: 10px solid #666; } 这个很明显,呈现的是border为10px的一个正方形 Sq ...
- 六、pink老师学习笔记——CSS三角形之美 margin负值之美文字围绕浮动元素行内块元素布局的巧妙运用
7. 拓展@ 7.1 margin负值之美 1). 负边距+定位:水平垂直居中 咱们前面讲过, 一个绝对定位的盒子, 利用 父级盒子的 50%, 然后 往左(上) 走 自己宽度的一半 ,可以实现盒子水 ...
- 【夯实基础--CSS】=＞ 高级技巧（雪碧图/滑动门/CSS三角形/字体图标(iconfont)等）
CSS高级技巧 CSS用户界面样式 所谓的界面样式, 就是更改一些用户操作样式, 比如 更改用户的鼠标样式, 表单轮廓等.但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了. 防止表单域 ...
- CSS第六天-高级技巧（元素隐藏、精灵图、CSS用户界面样式、margi负值作用、CSS三角形）
ps 今天这是html和css初级部分的最后一份文章了,下次发的就是HTML5和CSS3的一些基础知识.越学到后面,感觉越有意思.到后面可以自己去尝试做一些比较炫酷的动画了,还是蛮期待的. CSS高级 ...
- css三角形之美与品优购项目
CSS三角形之美 div{width: 0;height: 0;line-height:0;font-size: 0;border-top: 10px solid red;border-right:1 ...
- html li 怎么合并,HTML—CSS-case（合并boder / 滑动门 / 去除li边框 /css三角形原理）...
1.实现多个div盒子横排列,鼠标点上去后显示border,相连的border合并. :利用position:relative的层级比标准流高(后来居上原则),与margin-left:-1px: 若 ...
最新文章
- Java笔记(3) - 使用Spring Cloud Zookeeper + Feign实现服务发现
- x64汇编第三讲,64位调用约定与函数传参.
- 在计算机上设置桌面,如何在计算机上设置动态桌面墙纸
- 最难忘的一节计算机课,最难忘的一节课作文(3篇)
- c语言日历显示系统,C语言实现显示日历
- javascript 图(Graphs)算法与说明
- 编程创建一个Cale计算类，在其中定义2个变量(属性)表示两个操作数，定义四个方法实现求和、差、乘、商(要求除数为0的话，要提示)``并创建两个对象，分别测试 。
- 一些牛逼哄哄的javascript面试题
- js--定时器的使用
- basic计算机编程基础,QBASIC编程语言基础
- 企业为什么要做等保？不做等保有什么后果？
- 基于高德SDK实现跑步时轨迹渐变功能
- 【JVM进阶之路】垃圾回收机制和GC算法之三色标记（三）
- 二分法算法复杂度简化_让我们简化算法的复杂性！
- http状态码、含义大全
- jq html 回车提交表单,jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
- 什么是低代码开发，为何大企业都选择低代码来做数字化？
- 电子眼工作原理（防拍）
- Android项目——不成熟的计算器
- 【钉钉-场景化能力包】用钉盘做文件储存管理