如何使用html和css,如何使用html和css制作这个div？

这是我必须制作的div的图像,但我不知道如何制作它

我到现在为止一直试过这个

.rr > div {

text-align: center;

}

.rr {

position: relative;

height: 200px;

background: #232E39;

}

.rr.rr-left {

z-index: 1;

float: left;

width: 90%;

}

.rr.rr-right {

z-index: 2;

float: right;

width: 10%;

}

.rr:after,

.rr:before {

content: "";

position: absolute;

top: 0;

width: 0;

height: 0;

}

.rr-left:after {

right: 0;

border-left: 100px solid #232E39;

border-bottom: 200px solid #dcdcdc;

}

.rr-right:before {

left: -100px;

border-right: 100px solid #232E39;

border-top: 200px solid transparent;

}

.rr-left > div {

margin-right: 100px;

margin-left: 50px;

}

.rr-right > div {

margin-right: 50px;

margin-left: 25px;

}

但我无法调整此文本和按钮.我根据图像改变颜色面临问题.

如何使用html和css,如何使用html和css制作这个div？相关推荐

HTML5+CSS期末大作业：环保网站设计——环境保护(10页) 含设计报告 HTML+CSS+JavaScript 静态HTML环境保护网页制作下载 DIV+CSS环保网页设计代码
HTML5+CSS期末大作业:宠物网站设计--宠物猫(10页) 含设计报告 HTML+CSS+JavaScript 大学生简单个人静态HTML网页设计作品 DIV+CSS宠物网页设计代码常见网页设计 ...
[CSS]30种时尚的CSS网站导航条
[原文地址]:http://coolshell.cn/?p=562 我想,大家在上网的时候一定见过很多很多种各式各样的网站导航条的设计.这些导航条基本上来说都是用CSS来做的.这里,我们将向你介绍几种 ...
css text top,text-align属性(css中文本对齐属性)
text-align属性设置h1.h2.h3元素的文本对齐方法: h1{text-align:center} h2{text-align:left} h3{text-align:right} 亲自试 ...
【CSS】【14】CSS中使用背景图像
默认情况下背景图像会自动向水平和竖直两个方向平铺,如果不希望不平铺,或者只希望沿一个方向平铺,可以使backgroud-repeat属性来控制,该属性可以取以下4种之一 repeat:沿水平和竖直两个 ...
css php html介绍,对CSS知识的简单介绍
1.CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG.XHTML 之类的 XML 分支语言)文档的呈 ...
Atitit.css 规范 bem 项目中 CSS 的组织和管理
Atitit.css 规范 bem 项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...
css层叠上下文详解,CSS定位（层叠上下文）
前面花大力气介绍了布局,现在讲一讲CSS的定位. 定位是什么? 定位跟布局有啥关系?答案是没有关系,定位是指CSS在立体的角度的堆叠的情况,是垂直于屏幕的. 常常会有一个疑惑,CSS中,我给其中的一个 ...
vue 导入公共css_HTML+CSS入门 vue引入通用CSS
本篇教程介绍了HTML+CSS入门 vue引入通用CSS,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 1.在入口 js 文件 main.js 中引入,一些公共的样式文件 ...
CSS Dock Menu：JS+CSS 仿苹果MAC机桌面导航菜单
所需源文件--见下方文件附件在HTML中的<head>标签中插入如下代码: <script type="text/javascript" src="j ...
html css web笔记,Web/HTML/CSS/的笔记
一.web基本介绍 1.Web 是 Worl wide web 的缩写,称为全球广域网,俗称www 2.我们可以将Web理解为当前的一种互利网,对于我们来说更多的就是网站服务. 3.网站我们可以认为是 ...

如何使用html和css,如何使用html和css制作这个div？

如何使用html和css,如何使用html和css制作这个div？相关推荐

最新文章

热门文章