用CSS写一个底部为10PX的三角形

代码虽简单，但是只要对自己来说是新东西，就是好东西。

        div{
            width: 0px;
            height: 0px;
            border-right:60px solid transparent ;
            border-left:60px solid transparent ;
            border-bottom: 100px solid red;
        }

时间： 2024-12-12 09:28:27

用CSS写一个底部为10PX的三角形的相关文章

用CSS写一个简单的幻灯片效果页面

这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [用CSS写一个简单的幻灯片效果页面] 1.背景介绍CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation. transform属性向元素应用2D或3D转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. transition是令一个或多个可以用数值表示的css属性值

还在为小三角形切图？使用纯CSS写一个简单的三角形

同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;display:block;margin:0 auto;background:url(...)} </style> <div class="con"> <div class="icon"></div> <span>添加会

如何利用CSS写一个六边形？

众所周知,一般情况下div所表现出来的形态是一个矩形,如果给它添加border-radius属性,可以让它成为一个圆角矩形或者是圆形,但是如果希望div表现出更多的形态来呢? 那么我们就来讲讲如何用CSS来写一个六边形. 大家首先来看一下,一个六边形,拆解开来的话,就是一个矩形加左右两个三角形. 三角形的话很好写,用边框border属性就可以实现. 当我们给一个div非常粗的边框,但是宽度和高度分别都设置为0的时候,我就会得到如下的图形. 那么我们只要把其中一条边框给删除,另外两条边框变成透明,

纯css写一个大太阳的天气图标

效果效果图如下实现思路 div实现太阳的一条矩形光影 before伪元素制作另一条光影矩形,和已有的转变90° after伪元素画个圆实现太阳样式 dom结构用两个嵌套的div容器,父容器来控制图标显示的位置,子容器用来写太阳的一条光影矩形的样式. <div class="container"> <div class="sunny"></div> </div> 专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①②

纯css写一个带动画的弹框 visibility + opcity

css能实现各种各样的动态效果,比js实现简单,性能也比js实现高,现在我们就用纯css实现弹窗,主要用到了两个属性 opcity 和 visibility, opctiy 这个属性很简单控制元素透明度 ,visibility控制元素的显示和隐藏,他和display有一个很重要的区别,visibility可以用transition来进行过渡,而display并不可以,这就是我们不用display的原因可以配合上transform: scale() 让弹窗更有动态感觉全部代码: <!DOCT

纯css写一个switch开关

这样的简单的开关效果 1.html <div class="switch-box"> <div class="bg_con"> <input id="checked_1" type="checkbox" class="switch" value="0" /> <label for="checked_1"></lab

CSS：仿写博客园写一个静态网页

要求:一个小时仿照博客园的格局,写一个静态的网页,主要采用HTML+CSS+DIV的布局方式, 新建两个文件:website.html.website.css website.html代码如下: <!doctype html> <html lang="zh-CN"> <head> <meta charset="ansi"> <media name="description" content=&

使用HTML写一个完整的注册页面

在上一篇博客中,我简单地写了怎样通过使用HTML写一个简单的跳转登录页面,but,TMD太丑了,于是突发奇想+天马行空不如写一个完整注册页面和流程,呵呵,不废话直接上代码. 首先是第一个页面testlogin,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登录</title> <link href="tes

告别组件之教你使用原生js和css写移动端轮播图

在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. 老规矩,首先看一下最终效果,这个最终可以实现定时自动播放,触摸滑动,手动修改下面横条效果等功能. 项目中使用到的HTML代码如下 <div class="banner"> <ul class="clearfix"> <li><