css画斜线

css代码：

.border{width:500px; height:200px; border-bottom:2px solid #000000; -webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);}

html代码：

时间： 2024-10-10 18:42:09

css画斜线的相关文章

Effective前端3：用CSS画一个三角形

三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以贴一张png,但是这种办法有点low,或者是用svg的形式,但是太麻烦.三角形其实可以用CSS画出来.如上图提到,可以分为两种三角形,一种是纯色的三角形,第二种是有边框色的三角形,先介绍最简单的纯色三角形. 1. 三角形的画法三角形可以用border画出来,首先一个有四个border的div应该是这样的: 然后把它的高度和宽度去掉,剩下四个border,就变成了: 再把bord

前些日子用css画的大白

闲来无事用css画的一个大白...其实有一些地方偷懒了用svg去画的,因为用纯几何形状组合去画变化那么复杂的曲线不太现实.但svg曲线坐标还是自己一点点调出来的,没有用工具生成. :ps:点击身体的某些地方可以交互,你能发现几个地方?

用css画图标

css3的属性 transform(转换) 用途很广泛,功能也很强大,为了熟悉它的各种转换方式(平移 translate,旋转 rotate,扭曲 skew,放缩 scale),我做了一些平常常用的一些简单的图标. 这些图标很多是通过三角形来拼贴起来的,所以我们需要知道怎么样画三角形. 1. 我们要将该 div 的 width 和 height 都设置为 0,三角形是通过 border 来实现: 2. 通过我们需要画成的三角形的目标分析,这个三角形的朝向(只针对规则的朝向:上.右.下.左.上左.

css之斜线

.x { border: solid 1px red; width: 100px; height: 100px; position: relative; background-color: transparent; } .x:before { position: absolute; top: 0px; right: 0; left: 0; bottom: 0; border-bottom: 100px solid red; border-left: 100px solid transparent

如何用css画出三角形

看到有面试题里会有问到如何用css画出三角形众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. 这个时候如果将盒模型内部的height,width调为0px,则三角形就形成了. 1 border:100px solid transparent //边框100px,实线,透明颜色,下面三行

html+css画虚线，实线

html+css画虚线,实线 2014-07-18 09:21 4086人阅读评论(0) 收藏举报分类: 其他(11) html中加入虚线 Posted on 2011-11-23 15:57 Trible.H 阅读(11498) 评论(0) 编辑收藏 html里添加虚线 <hr style="border:1px dashed #000; height:1px"> <hr style="border:1px dotted #036"

用CSS画英文字母

起因是在网上看到了有人用纯css画出了英文字母,感觉不难,了解过css3的话都会感觉思路比较直观主要用到的css知识点:绝对定位,圆角属性以及元素的宽高均为零时边框的挤压性质效果图源代码 <!DOCTYPE html> <html> <head> <title>CSS-Letter</title> <meta charset="utf-8"/> <style type="text/css&qu

css 画爱心

用css画爱心,虽然这样的方法会写很多的css代码,但是做成功之后,会有一种很满足的成就感. 爱心,可以有3个常规的几何图形形成,一个正方形加两个相同半径的圆或半圆.一个等腰三角形加两个圆,两个房型叠加,都行. 我的实现方法是选择最简单的一个正方形加两个相同半径的圆.首先创建一个类名为heart的div,然后为其固定宽度,高度,和背景颜色.接着通过伪类选择器:before和:after添加content:''; 规定其宽度和高度都为之前的div的高度,背景颜色与之前的div相同,通过一个大于高度

css画三角

#sanjiao{ width: ; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid black;} div+css画三角形代码原理采用的是均分原理. border-left设置为透明后 ,如果border-top有颜色,那么就会出来一个45度的锐角.