css制作三角形、带三角文本框、价格三角框

css制作三角形及带三角文本框

<!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: 20px solid pink;border-right: 20px solid red;border-bottom: 20px solid blue;border-left: 20px solid green;}.box2 {width: 0;height: 0;border: 50px solid transparent;border-left-color: pink;margin: 20px;}.jd {position: relative;width: 120px;height: 249px;background-color: pink;}.jd span {position: absolute;right: -20px;top: 40px;width: 0;height: 0;/* 为了照顾兼容性 */line-height: 0;font-size: 0;border: 10px solid transparent;border-left-color: pink;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div><div class="jd"><span></span></div>
</body>
</html>

直角三角形及价格三角框

<!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-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;}.price {width: 160px;height: 24px;line-height: 24px;border: 1px solid red;margin: 25px;}.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="box1"></div><div class="price"><span class="miaosha">¥1650<i></i></span><span class="origin">¥5650</span></div>
</body>
</html>

css制作三角形、带三角文本框、价格三角框相关推荐

制作京东快递查询 css制作三角形
这是我学习前端道路上制作的一个小案例,想把这些记下来,记录我的学习经历和更加熟练的掌握代码..这个案例是当我们在下面输入数字时上面的盒子会放大的显示出来,效仿的是京东快递查询单号.好了,废物不多说,上 ...
CSS——制作三角形
文章目录前言一.上三角形的制作二.右三角形的制作总结前言本文主要介绍如何利用css制作三角形~ 一.上三角形的制作 1.示例图: 2.方法简介: 1.将宽和高设为0,利用border制作合 ...
CSS - 制作三角形
目录一.实现原理二.三角形制作案例 1.一个简单的三角形 2.直角三角形 3.带边框的三角形一.实现原理其实实现的原理很简单,就是通过css的border属性进行制作.那么为什么border属 ...
CSS制作的32种图形效果梯形 | 三角 | 椭圆 | 平行四边形 | 菱形 | 四分之一圆 | 旗帜
在练习过程中,总结了一下常用的CSS实现三角形等常见规则图形,为了节省时间,下面图形都采用的一个标签,可以是块元素也可以是行内元素,不过行内元素需要加上"display:block;&quo ...
html+css制作三角形
今天我们来分享一下三角形的制作方法主要就是通过调整div的几个边框线,将它们调节的足够宽,然后再将div的宽度和长度重新赋值为0 代码如下: <div id="main"& ...
用CSS制作可交换带事件处理的图片按钮
按钮是网页最常用的控件了,怎样设计一个更好看的按钮,这两天试验了几种方法: 1.用Javascript交换图片的方式先在网页中制作图片,然后把图片转换为服务器端控件,为该控件添加事件处理. ...
利用css制作三角形
1.首先制作一个正方形只设置边框 2.除了上边框其它边框都设置透明色(transparent) <style>div {width: 100px;height: 100px;border: ...
html css拖拽设计,css绘制三角形和 HTML拖拽事件
利用css制作三角形利用设置边框的三个边的长度和border实现三角形设置,并隐藏其他边例子:#yz3{ display: inline-block; 0; height: 0; border-t ...
css制作tips提示框，气泡框，制作三角形
有时候我们的页面会需要这样的一些提示框或者叫气泡框,运用css,我们可以实现这样的效果. 为了实现上面的效果,我们首先要理解如何制作三角形. 当我们给一个DIV不同颜色的边框的时候,我们可以得到下面的 ...
CSS创建三角形（小三角）的几种方法
你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并 ...

css制作三角形、带三角文本框、价格三角框

css制作三角形、带三角文本框、价格三角框相关推荐

最新文章

热门文章