CSS---利用伪类绘制倒三角形

<html>
<head>
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            position: relative;
            width: 100px;
            height: 100px;
            background: #f00;
        }
        .box:after{
            position: absolute;
            left: 0;
            bottom: 0;
            content: ‘‘;
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 10px solid #fff;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
时间: 2024-11-01 05:29:46

CSS---利用伪类绘制倒三角形的相关文章

利用CSS hover伪类改变其他元素的总结

:hover 伪类经常用于页面的一些鼠标交互.链接点击变化,增强页面的用户体验,但是可以用来改变其他元素样式,可以在不使用JS 的情况下,达到想要的页面效果. 1.hover改变自身的效果: 鼠标悬浮改变样式: HTML <div id="yanshi"> 演示 </div> CSS #yanshi{ width: 100px; height: 100px; transition: background-color 0.5s,color 0.5s; text-a

CSS中伪类及伪元素用法详解

原文:CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的读者可以自己尝试: :active  大致效果为用鼠标点击时,元素增加特效,鼠标松开时,特效消失.多用在按钮的点击上. 写法: 这里id为box的是一div块,在css中首先设置了他的基本样式,下面为加入:active伪类后需要修改的样式. 未点击时: 点击之后: :active.:hover.:

关于css中伪类及伪元素的总结

css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有“段落的第一行”.“文章首字母”之类的选择器,而这在一些出版场景里又是必须的,这一情况下出现的.引用标准中的话: CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on infor

浅谈CSS的伪类与伪元素

本文向大家展示了CSS的伪类与伪元素,介绍的非常全面,这里推荐给大家参考下. 伪类 伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性等静态的标志.由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式:当状态改变时,它又会失去这个样式.由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类. 伪类选择器:CSS中已经定义好的选择器,不能随便取名 :link 伪类将应用于未被访问过的链接,与:v

CSS之伪类

:hover -- CSS :hover 伪类,适用于光标(鼠标指针)指向一个元素,但此元素未被激活时的样式 语法: :hover CSS版本:CSS2 引用网址:http://www.dreamdu.com/css/pseudo-class_hover/ 说明: 适用于光标(鼠标指针)指向一个元素,但此元素未被激活时 客户端(浏览器)可以根据用户与其交互的动作改变其渲染效果,CSS为这种情况提供了三个伪类:hover.active.focus 上述三种伪类不是互斥的,一个元素同时可以适用其中的

CSS :first-child 伪类

CSS :first-child 伪类  向元素的第一个子元素添加样式,示例如下: 例 1 - 匹配第一个 <p> 元素(第一个段落显示为红色) <style type="text/css"> p:first-child { color:red }; </style> <p>I am a <em>strong</em> man. I am a <em>strong</em> man.<

用一个例子学习CSS的伪类元素

CSS伪类元素是一个非常酷的东西!首先我们理解一下它,:before :after 伪类元素,也就是虚假的元素.它可以插入在元素的前面或者后面,而在HTML文档结构中,它却是不存在的,因为Js是无法通过DOM去控制它的.而其用法也很简单,和一些伪类一样,如:a:hover, a:active.那么伪元素这里便是 a:before, a:after. 关于伪元素,最重要的一个属性便是 content 属性,如果CSS中的伪元素没有content属性,那么这个伪元素就是没有任何效果的.但是我们可以给

[转]CSS目标伪类E:target

CSS3 target 伪类不得不说那些事儿(纯CSS实现tab切换) 是不是觉得target有点眼熟?! 今天要讲的不是HTML的<a>标签里面有个target属性. target伪类是css3的新属性. 说到伪类,对css属性的人肯定都知道:hover.:link.:visited.:focus等等,target用法跟他们是同出一辙的. 官方定义是: URL 带有后面跟有锚名称 #,指向文档内某个具体的元素.这个被链接的元素就是目标元素(target element). :target 选

08.css学习-伪类选择器

<html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">/* 伪类选择器:伪类选择器就是对元素处于某种状态下进行样式的(a表示对a标签作用). 注意: 1. a:hover 必须被置于 a:link 和 a:visited 之后 2. a:active 必须被置于 a:hover 之后 */ a:link{color:#F00} /* 没有被点