css三角形 | 易学教程

css实现垂直手风琴效果

阅读更多关于 css实现垂直手风琴效果

1 <html lang="en"> 2 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>垂直手风琴</title> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 14 .listbox { 15 width: 500px; 16 height: 400px; 17 margin: 50px auto; 18 } 19 20 .list { 21 position: relative; 22 } 23 24 .list a { 25 display: block; 26 height: 35px; 27 background: linear-gradient(#eeeeee, #8f8f8f); 28 text-decoration: none; 29 padding-left: 12px; 30 border-radius: 5px; 31 text-decoration: none; 32 color: #424242; 33

css实现三角形

阅读更多关于 css实现三角形

css 实现三角形面试中被问到如何用css实现一个三角形，想了半天就就想到一个border的实现，考虑了到transform的实现，但是没想来怎么去做。晚上查了各种资料最终实现了三种css的写法。 1.border 网上最多也是最灵活的实现方式 <div class="arrow-up"> </div> <div class="arrow-down"> </div> <div class="arrow-left"> </div> <div class="arrow-right"> </div> /*箭头向上*/ .arrow-up { width:0; height:0; border-left:30px solid transparent; border-right:30px solid transparent; border-bottom:30px solid red; } /*箭头向下*/ .arrow-down { width:0; height:0; border-left:20px solid transparent; border-right:20px solid transparent; border-top:20px solid #0066cc; } /*箭头向左*/ .arrow-left { width:0; height:0; border-top

CSS 的高级技巧

阅读更多关于 CSS 的高级技巧

一、黑白图像当你需要让一张彩色的图片显示为黑白照片的时候，你可以用下面的一段代码。 img.desaturate{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); } 二、使用 :not() 在菜单上应用/取消应用边框先给每一个菜单项添加边框 .nav li{ border-right: 1px solid #666; } 然后再除去最后一个元素 .nav li:last-child{ border-right: none; } 也可以直接使用 :not() 伪类来应用元素 .nav li:not(:last-child){ border-right: 1px solid #666 } 如果你的元素有兄弟元素的话，也可以使用通用的熊年底选择符( ~ ） .nav li:first-child ~ li{ border-left: 1px solid #666 } 三、页面顶部阴影给网页加上漂亮的顶部阴影效果 body:before{ content: ''; position: fixed; top: -10px; left: 0;

CSS格式模板

阅读更多关于 CSS格式模板

//GeneralCSS.css View Code /* ########## IE compatible Setting(Copy the following things to the <head> Section) ##########  <link href="GeneralCss.css" rel="stylesheet" type="text/css"/> <!- [if IE]><link href="CssHack/IECssHack.css" rel="stylesheet" type="text/css"/> <!- [if !IE]><link href="CssHack/OthersCssHack.css" rel="stylesheet" type="text/css"/> */ /* ########## Initialize CSS(初始化CSS的设置) ########## http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6

CSS画出的各种形状图

阅读更多关于 CSS画出的各种形状图

利用CSS可以画出各种需要的图形目录 [1]矩形 [2]圆形 [3]椭圆 [4]直角三角形 [5]正三角形 [6]平行四边形 [7]梯形 [8]六角星 [9]六边形 [10]五角星简单图形矩形 div{ width: 100px; height: 100px; background-color: red; } 圆形 div{ width: 100px; height: 100px; background-color: red; border-radius: 50%; } 椭圆 div{ width: 100px; height: 50px; background-color: red; border-radius: 50%; } 直角三角形 div{ width: 0; height: 0; border: 50px solid transparent; border-bottom-color: red; } 正三角形 div{ width: 0; height: 0; border: 50px solid transparent; border-width: 50px 43.3px; border-bottom-color: red; } 平行四边形 div{ margin-left: 50px; width: 100px; height: 100px;

CSS之三角形的制作

阅读更多关于 CSS之三角形的制作

用边框把宽高撑开，其他边设置为透明色或者背景色即可，再用position定位到任何地方去 < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < title > Title < / title > < style type = "text/css" > . box { width : 0 px ; height : 0 px ; border - right : 100 px solid transparent ; border - left : 100 px solid transparent ; border - top : 100 px solid transparent ; border - bottom : 100 px solid # 000000 ; } < / style > < / head > < body > < div class = "box" > < / div > < / body > < / html > 来源： CSDN 作者：九层之台始于垒土链接： https://blog.csdn.net/dwjdj/article/details/104106399

纯CSS气泡框实现方法探究

阅读更多关于纯CSS气泡框实现方法探究

气泡框（或者提示框）是网页中一种很常见的元素，大多用来展示提示信息，如下图所示：拆分来看，形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头，要制作出这样的气泡框，如果解决了三角形小箭头就容易了。一种方法就是制作这样一个三角形箭头的图片，然后定位在矩形框上。但这种解决办法在后期更改气泡框会很不方便，可能每修改一次气泡框都要重新制作一个三角形小图标。如果我们能够直接用HTML和CSS代码实现这样一个三角形小箭头一切都迎刃而解了。首先我们来看一下border这个属性，当我们把一个div的border-color设为不同值的时候，可以看到四边都成了一个梯形。 1 # test{ width : 50px ; height : 50px ; border-width : 50px ; border-style : solid ; border-color : #09F #990 #933 #0C9 ;} 如果我们继续把这个div的width和height都设为0，可以看到四边都成了一个三角形。 1 # test{ width : 0 ; height : 0 ; border-width : 75px ; border-style : solid ; border-color : #09F #990 #933 #0C9 ;} 在主流浏览器中检测一下

css实现有边框的三角形

阅读更多关于 css实现有边框的三角形

1、html  <div class="border-up"> <span></span> </div>  <div class="border-down"> <span></span> </div>  <div class="border-left"> <span></span> </div>  <div class="border-right"> <span></span> </div> 2、css .border-up { width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid #333; position: relative; margin: 50px auto; } .border-up span { display: block; width: 0; height: 0; border-left: 28px solid transparent; border-right: 28px solid transparent; border-bottom: 28px solid

css实现有边框有出口的三角形

阅读更多关于 css实现有边框有出口的三角形

1、html   <div class="border-up-empty"> <span></span> </div>  <div class="border-down-empty"> <span></span> </div>  <div class="border-left-empty"> <span></span> </div>  <div class="border-right-empty"> <span></span> </div> 2、css .border-up-empty { width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid #333; position: relative; margin: 50px auto; } .border-up-empty span { display: block; width: 0; height: 0; border-left: 28px solid transparent; border-right: 28px

less的mixin

阅读更多关于 less的mixin

less的官网：http://lesscss.org/ 使用node下载less： npm install -g less 编译less文件： lessc styles.less styles.css css有什么问题，为什么要使用预编译的less？因为样式庞大以后，层次不清晰，它不像html一样有树状的文档结构，我们总是会找：谁谁谁的父类选择器是谁，css样式表会很乱。如何使用less？先写less文件，然后用命令行lessc命令编译成css文件，html中引入css的方式是外部引入（浏览器读的永远是css，而不是less，less方便程序员阅读和写）。 less的mixin mixin翻译过来就是混合，它类似于函数，可以传参，可以调用。现在有一段代码，可以画出一个三角形： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>  <style type="text/css"> #wrap .sjx { width : 0 ; height : 0 ; border-style : solid ; border-width : 60px ; border

订阅 css三角形