div+css图形设计

客官°小女子只卖身不卖艺 2022-01-29 16:04 222阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    			<style type="text/css"> .a{ width: 100px; height: 20px; position :relative; border-bottom: 7px solid; border-top: 7px solid; border-left: 30px solid; border-right: 30px solid; border-color: #4c4743 #fe5e3a #4c4743 #fe5e3a; position :relative; } .bb{ float: left; background-color: #fe5e3a;; width: 0; height: 0; border: 20px solid; border-color: transparent transparent transparent #4c4743; } .cc{ float: left; background-color: #4c4743; width: 0; height: 0; border-bottom: 20px solid; border-top: 20px solid; border-left: 20px solid; border-right: 10px solid; border-color: #fe5e3a #fe5e3a #fe5e3a transparent; } .dd{ float:left; background-color: #fe5e3a;; width: 50px; height:40px; text-align: left; color: #FFFFFF; line-height:35px; } .ff{ float: left; background-color: #fe5e3a; width: 0; height: 0; border-bottom: 20px solid; border-top: 20px solid; border-left: 20px solid; border-right: 5px solid; border-color: #4c4743 #4c4743 #4c4743 transparent; } </style>
    	</head>
    	<body>
    	
    		
    		<br>
    		<div>
    		<div class="bb"></div>	<div class="dd">技术部</div><div class="ff"></div><div class="cc"></div>
    		</div>
    	</body>
    </html>

运行结果：  
![在这里插入图片描述][20190522152050532.png]

[20190522152050532.png]: /images/20220129/598f3e7929d74756a6b15a0b35c0a220.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Python图形界面设计

、按钮对话框，并显示输入对应的内容 from tkinter import * import tkinter.messagebox as message...

古城微笑少年丶/ 2024年04月18日 14:09/ 0 赞/ 66 阅读

相关 DIVCSS使用要点是什么

css 兼容要点：doctYPe 影响 css 处理 FF: div 设置 margin-left, margin-right 为 auto 时已经居中, ie 不行 FF

爱被打了一巴掌/ 2024年04月03日 09:31/ 0 赞/ 100 阅读

相关关于divcss的使用详细介绍

第一步：先建立index.html和css.css两个文件。放在同一目录里 \[建议编辑工具用dreamweaver以后简称dw\] 第二步：在index.ht

红太狼/ 2024年04月03日 09:30/ 0 赞/ 101 阅读

相关 DIVCSS技术如何入门

css是cascading style sheets(层叠样式表单)的简称。更多的人把它称作样式表。顾名思义，它是一种设计网页样式的工具。借助css的强大功能，网页

我会带着你远行/ 2024年04月03日 09:30/ 0 赞/ 91 阅读

相关 JavaFX 图形界面设计

JavaFx 组件分类构成图片用户界面的各个元素称为节点（node）构成图形用户界面的类主要分为三类：面板类（pane class）、控件类（control cl

电玩女神/ 2023年10月05日 21:11/ 0 赞/ 77 阅读

相关 Java图形界面设计基础

早先程序使用最简单的输入输出方式，用户在键盘输入数据，程序将信息输出在屏幕上。现代程序要求使用图形用户界面(Graphical User Interface,GUI)，界面中有

桃扇骨/ 2022年05月18日 04:18/ 0 赞/ 282 阅读

相关 Java图形界面之布局设计

在界面设计中，一个容器要放置许多组件，为了美观，为组件安排在容器中的位置，这就是布局设计。java.awt中定义了多种布局类，每种布局类对应一种布局的策略。常用的有以下布局类：

雨点打透心脏的1/2处/ 2022年05月17日 03:52/ 0 赞/ 256 阅读

相关 echart图形设计

1.柱形图设计 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV

超、凢脫俗/ 2022年04月17日 02:14/ 0 赞/ 259 阅读

相关图形设计_韦恩图

Venn图（英语：Venn diagram），韦恩图,是在所谓的[集合论][Link 1]（或者类的理论）数学分支中，在不太严格的意义下用以表示[集合][Link 2]（或[类

墨蓝/ 2022年03月28日 04:37/ 0 赞/ 249 阅读

相关 div+css图形设计

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

客官°小女子只卖身不卖艺/ 2022年01月29日 16:04/ 0 赞/ 223 阅读