矩形对角线分界css样式设计

叁歲伎倆 2022-10-02 10:50 156阅读 0赞

![在这里插入图片描述][20190618111910185.png]

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type='text/css'> .right-triangle { width: 0px; height: 0px; border-color: #4c4743 #4c4743 #fe5e3a #fe5e3a; border-width: 20px 50px 20px 50px; border-style: solid; position: absolute; margin:0px; } .font-div{ line-height: 40px; position: absolute; width:100px ; height: 40px; text-align: center; color: #FFFFFF; font-size: 16px; } </style>
    	</head>
    
    	<body>
    		<div class="right-triangle"></div>
    		<div class="font-div">页小计:</div>
    	</body>
    
    </html>

![在这里插入图片描述][20190618112016416.png]

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type='text/css'> .right-triangle { width: 0px; height: 0px; border-color: #fe5e3a #4c4743 #4c4743 #fe5e3a; border-width: 20px 50px 20px 50px; border-style: solid; text-align: center; font-size: 16px; color: #FFFFFF; line-height:20px; } </style>
    	</head>
    
    	<body>
    		<div class="right-triangle">
    			<p style="position: absolute;margin: 0px;">	页小计:</p>
    		</div>
    	</body>
    
    </html>

[20190618111910185.png]: /images/20220112/e6b4ebcb9e664b3e9dbf0df110284cf4.png
[20190618112016416.png]: /images/20220112/3466081207cc4733af0297aa75935ea8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，156人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS 的圆角矩形

CSS 圆角矩形的学习

男娘i/ 2024年05月06日 21:23/ 0 赞/ 86 阅读

相关 CSS样式

一、概念 CSS(Cascading Style Sheets) 层叠样式表，叫级联样式表，简称样式表。文件后缀.css。语法：CSS规则由两个主要的部分构成：选

ゞ浴缸里的玫瑰/ 2024年03月23日 13:29/ 0 赞/ 67 阅读

相关 CSS样式

CSS三种引入方式行内样式行内样式:只在一个标签中起作用 <!-- 1.行内样式:写在某个标签的style属性中特点:只对这个标签有

短命女/ 2023年10月02日 19:07/ 0 赞/ 22 阅读

相关 CSS样式

1、CSS介绍 CSS指层叠式表，组成成分：选择器: 改变样式的HTML元素一条或多条声明:每条声明由一个属性和一个值组成，使用花括号来包围声明，属性与值之间使

叁歲伎倆/ 2023年06月25日 03:04/ 0 赞/ 17 阅读

相关矩形对角线分界css样式设计

![在这里插入图片描述][20190618111910185.png] <!DOCTYPE html> <html> <head>

叁歲伎倆/ 2022年10月02日 10:50/ 0 赞/ 157 阅读

相关 CSS样式

一、内部样式表 1、选择器： <html> <head> <title>内部样式表</title> <style type=

怼烎@/ 2022年06月12日 11:15/ 0 赞/ 358 阅读

相关 css样式

1.div下边框虚线 <html> <head> <style type="text/css"> dv{ border-bot

た入场券/ 2022年06月05日 05:25/ 0 赞/ 268 阅读

相关 CSS样式

1. font-size:20px; /\设置文字字号\/ 2. width:20px;

矫情吗；*/ 2022年05月24日 10:37/ 0 赞/ 313 阅读

相关 CSS样式

设置透明背景 background-color: transparent; div靠右或靠左显示 float:right float:left

以你之姓@/ 2021年09月25日 08:24/ 0 赞/ 486 阅读

相关 thymeleaf设置css样式，矩形百分比填充背景色

对调查结果进行统计的页面，在div的style中拼接后台参数，显示百分比 <tr th:each="option:{obj.list}"> <td th:

àì夳堔傛蜴生んèń/ 2021年06月11日 15:13/ 0 赞/ 860 阅读