1、纯css完成矩形/三角/梯形/圆/五角星

最新推荐文章于 2020-04-27 10:01:56 发布
VIP文章 最新推荐文章于 2020-04-27 10:01:56 发布
阅读量149 收藏
点赞数
分类专栏： HTML和CSS 文章标签： 纯css 纯css实现三角形 纯css实现圆 纯css实现五角星 纯css实现勾
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43791795/article/details/103133696
版权

学习网站

<!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>Document</title>
</head>
<style>
.box{
    
  display: flex;
}
.box-child{
    
  margin-right: 10px;
  
}
/* 矩形样式 */
.rect1{
    
  width: 0;
  height: 0;
  margin: auto;
  border: 20px solid #6dd6f5;
  border-right-color: darkgrey;
  border-bottom-color: blue;
  border-left-color: #87bf59;
}
.rect2{
    
  width: 0;
  height: 0;
  border-top: 30px solid #6dd6f5;
  border-right: 15px solid darkgrey;
  border-bottom: 10px solid blue;
  border-left: 20px solid #87bf59;
}
.rect3{
    
  width: 20px;
  height: 0;
  margin: auto;
  border: 20px solid #6dd6f5;
  border-right-color: darkgrey;
  border-bottom-color: blue;
  border-left-color: #87bf59;
}

.rect4{
    
  width: 20px;
  height: 10px;
  margin: auto;
  border: 14px solid #6dd6f5;
  border-right-color: darkgrey;
  border-bottom-color: blue;
  border-left-color: #87bf59;
}

/* 三角形样式 */
.triangle1{
    
  width: 0;
  height: 0;
	border: 30px solid transparent;
  border-left-width: 10px;
  border-top-width: 0;
  border-bottom-color: #6dd6f5;
}

.triangle2{
    
  width: 0;
  height: 0;
	border: 15px solid transparent;
  border-bottom-color: #6dd6f5;
}

.triangle3{
    
  width: 0;
  height: 0;
	border: 20px solid transparent;
  border-top-width: 15px;
  border-bottom-width: 15px;
  border-bottom-color: #6dd6f5;
}
.triangle4{
    
  width: 0;
  height: 0;
	border: 15px solid transparent;
  border-bottom-color: #6dd6f5;
  border-right-color: #6dd6f5;
}

/* 梯形 */
.trapezoidal1{
    
  width: 15px;
	height: 0;
	border: 20px solid transparent;
	border-left-width: 10px;
	border-bottom-color: #6dd6f5;
}
.trapezoidal2{
    
  width: 15px;
	border: 20px solid transparent;
	border-bottom-color: #6dd6f5;
}

/* 圆 */
.round{
    
  width: 0px;
	height: 0px;
	margin: auto;
最低0.47元/天 解锁文章
weixin_43791795
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用Div+CSS纯图片实现圆角矩形的方法小结
09-24
主要介绍了使用Div+CSS纯图片实现圆角矩形的方法小结,CSS3中用代码绘制圆角矩形非常方便,而本文要介绍的则是利用图片来实现兼容性更强的方法,需要的朋友可以参考下
五角星
1252661442的博客
11-13 218
注：总感觉不对劲，就是说不上来哪里不对，看出来的可聊聊看法 public class Wujiaoxing { public static void main(String[] args) { System.out.println("五角星"); for (int i = 1; i < 6; i++) { for (in...
jQuery学习笔记——简易五角星评分实例
weixin_41306215的博客
04-27 232
效果： //需求1：鼠标移动进去，前面的星星就会有颜色 //需求2：鼠标移出去，所有的星星没有颜色 //需求3：鼠标点击星星，前面的星星全部有颜色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
CSS绘制基本图形（矩形/圆形/三角形/多边形/爱心/八卦）
weixin_30535167的博客
01-04 79
1. 矩形 1 #square{ 2 width: 100px; 3 height: 100px; 4 background: red; 5 } 2.圆形 1 #circle { 2 width: 100px; 3 height: 100px; 4 background: red;　　　　<!--基于不同浏览器设...
【CSS】css3绘制各种形状图形三角形，菱形，五角星，椭圆等
疾术客
05-30 3522
1.制作圆形： 要使用CSS来制作一个圆形，我们需要一个div，被给它设置一个ID <div id="ang"></div> 圆形在设置CSS时要设置宽度和高度相等，然后设置border-radius属性为宽度或高度的一半即可： #ang{ width: 120px; height: 120px; background: #f6f7...
css/JavaScript/Python爱心代码
10-12
爱心代码
网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容
10-30
网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容
HTML5/CSS3/JavaScript实现搜索下拉框和圆角矩形
07-12
无聊时写的，实现了一个可搜索的下拉控件和圆角矩形，代码很简单，高手请勿喷。无聊时写的，实现了一个可搜索的下拉控件和圆角矩形，代码很简单，高手请勿喷。无聊时写的，实现了一个可搜索的下拉控件和圆角矩形，...
自学HTML/CSS第四天
08-11
自学HTML/CSS第四天
###对华为OD分布式操作系统的详细介绍
05-22
华为OD
2110220116吴骏博.py
最新发布
05-22
2110220116吴骏博.py
基于Java的ApplicationPower快速项目生成脚手架设计源码
05-22
ApplicationPower项目生成脚手架设计源码：该项目基于Java开发，包含284个文件，主要使用Java和Shell语言。ApplicationPower是一个快速的项目生成脚手架，旨在帮助开发者快速搭建项目框架，包括创建项目结构、配置文件、开发环境等，提高开发效率。
基于MATLAB实现的OFDM经典同步算法之一Park算法仿真，附带Park算法经典文献+代码文档+使用说明文档.rar
05-22
CSDN IT狂飙上传的代码均可运行，功能ok的情况下才上传的，直接替换数据即可使用，小白也能轻松上手 【资源说明】 基于MATLAB实现的OFDM经典同步算法之一Park算法仿真，附带Park算法经典文献+代码文档+使用说明文档.rar 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2020b；若运行有误，根据提示GPT修改；若不会，私信博主（问题描述要详细）； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可后台私信博主； 4.1 期刊或参考文献复现 4.2 Matlab程序定制 4.3 科研合作 功率谱估计： 故障诊断分析： 雷达通信：雷达LFM、MIMO、成像、定位、干扰、检测、信号分析、脉冲压缩 滤波估计：SOC估计 目标定位：WSN定位、滤波跟踪、目标定位 生物电信号：肌电信号EMG、脑电信号EEG、心电信号ECG 通信系统：DOA估计、编码译码、变分模态分解、管道泄漏、滤波器、数字信号处理+传输+分析+去噪、数字信号调制、误码率、信号估计、DTMF、信号检测识别融合、LEACH协议、信号检测、水声通信 5、欢迎下载，沟通交流，互相学习，共同进步！
基于MATLAB实现的imu和视觉里程计 kalman滤波器 进行融合+使用说明文档.rar
05-22
CSDN IT狂飙上传的代码均可运行，功能ok的情况下才上传的，直接替换数据即可使用，小白也能轻松上手 【资源说明】 基于MATLAB实现的imu和视觉里程计 kalman滤波器 进行融合+使用说明文档.rar 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2020b；若运行有误，根据提示GPT修改；若不会，私信博主（问题描述要详细）； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可后台私信博主； 4.1 期刊或参考文献复现 4.2 Matlab程序定制 4.3 科研合作 功率谱估计： 故障诊断分析： 雷达通信：雷达LFM、MIMO、成像、定位、干扰、检测、信号分析、脉冲压缩 滤波估计：SOC估计 目标定位：WSN定位、滤波跟踪、目标定位 生物电信号：肌电信号EMG、脑电信号EEG、心电信号ECG 通信系统：DOA估计、编码译码、变分模态分解、管道泄漏、滤波器、数字信号处理+传输+分析+去噪、数字信号调制、误码率、信号估计、DTMF、信号检测识别融合、LEACH协议、信号检测、水声通信 5、欢迎下载，沟通交流，互相学习，共同进步！
证券行业政策利好频出提振市场信心——财政部和证监会公布一系列活跃资本市场的措施点评-6页.pdf.zip
05-22
证券行业政策利好频出提振市场信心——财政部和证监会公布一系列活跃资本市场的措施点评-6页.pdf.zip
基于MATLAB实现的脉冲编码调制，模拟信号的数字传输：抽样、量化、编码+使用说明文档.rar
05-22
CSDN IT狂飙上传的代码均可运行，功能ok的情况下才上传的，直接替换数据即可使用，小白也能轻松上手 【资源说明】 基于MATLAB实现的脉冲编码调制，模拟信号的数字传输：抽样、量化、编码+使用说明文档.rar 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2020b；若运行有误，根据提示GPT修改；若不会，私信博主（问题描述要详细）； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可后台私信博主； 4.1 期刊或参考文献复现 4.2 Matlab程序定制 4.3 科研合作 功率谱估计： 故障诊断分析： 雷达通信：雷达LFM、MIMO、成像、定位、干扰、检测、信号分析、脉冲压缩 滤波估计：SOC估计 目标定位：WSN定位、滤波跟踪、目标定位 生物电信号：肌电信号EMG、脑电信号EEG、心电信号ECG 通信系统：DOA估计、编码译码、变分模态分解、管道泄漏、滤波器、数字信号处理+传输+分析+去噪、数字信号调制、误码率、信号估计、DTMF、信号检测识别融合、LEACH协议、信号检测、水声通信 5、欢迎下载，沟通交流，互相学习，共同进步！
基于MATLAB实现的编写实现图像几何校正的程序，根据靶图将tiger图像从鱼眼形变恢复+使用说明文档.rar
05-22
CSDN IT狂飙上传的代码均可运行，功能ok的情况下才上传的，直接替换数据即可使用，小白也能轻松上手 【资源说明】 基于MATLAB实现的编写实现图像几何校正的程序，根据靶图将tiger图像从鱼眼形变恢复+使用说明文档.rar 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2020b；若运行有误，根据提示GPT修改；若不会，私信博主（问题描述要详细）； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可后台私信博主； 4.1 期刊或参考文献复现 4.2 Matlab程序定制 4.3 科研合作 功率谱估计： 故障诊断分析： 雷达通信：雷达LFM、MIMO、成像、定位、干扰、检测、信号分析、脉冲压缩 滤波估计：SOC估计 目标定位：WSN定位、滤波跟踪、目标定位 生物电信号：肌电信号EMG、脑电信号EEG、心电信号ECG 通信系统：DOA估计、编码译码、变分模态分解、管道泄漏、滤波器、数字信号处理+传输+分析+去噪、数字信号调制、误码率、信号估计、DTMF、信号检测识别融合、LEACH协议、信号检测、水声通信 5、欢迎下载，沟通交流，互相学习，共同进步！
基于LSTM的财务因子预测选股模型.zip
05-22
基于LSTM的财务因子预测选股模型LSTM (Long Short-Term Memory) 是一种特殊的循环神经网络（RNN）架构，用于处理具有长期依赖关系的序列数据。传统的RNN在处理长序列时往往会遇到梯度消失或梯度爆炸的问题，导致无法有效地捕捉长期依赖。LSTM通过引入门控机制（Gating Mechanism）和记忆单元（Memory Cell）来克服这些问题。 以下是LSTM的基本结构和主要组件： 记忆单元（Memory Cell）：记忆单元是LSTM的核心，用于存储长期信息。它像一个传送带一样，在整个链上运行，只有一些小的线性交互。信息很容易地在其上保持不变。 输入门（Input Gate）：输入门决定了哪些新的信息会被加入到记忆单元中。它由当前时刻的输入和上一时刻的隐藏状态共同决定。 遗忘门（Forget Gate）：遗忘门决定了哪些信息会从记忆单元中被丢弃或遗忘。它也由当前时刻的输入和上一时刻的隐藏状态共同决定。 输出门（Output Gate）：输出门决定了哪些信息会从记忆单元中输出到当前时刻的隐藏状态中。同样地，它也由当前时刻的输入和上一时刻的隐藏状态共同决定。 LSTM的计算过程可以大致描述为： 通过遗忘门决定从记忆单元中丢弃哪些信息。 通过输入门决定哪些新的信息会被加入到记忆单元中。 更新记忆单元的状态。 通过输出门决定哪些信息会从记忆单元中输出到当前时刻的隐藏状态中。 由于LSTM能够有效地处理长期依赖关系，它在许多序列建模任务中都取得了很好的效果，如语音识别、文本生成、机器翻译、时序预测等。
css空心三角形_纯CSS+HTML制作三角形和圆|实心+空心
06-03
关于制作纯CSS的空心三角形和圆，可以参考以下代码示例： 空心三角形： ``` <div class="triangle"></div> .triangle { width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值