`

做一个半梯形形状的div

 
阅读更多







.form_title_div{
	width:100px; font-size: 18px; border-right: 23px solid transparent; border-bottom: 23px solid #3DAEE9; border-bottom-color: #3DAEE9;
       border-top-left-radius: 5px;-webkit-border-left-radius: 5px;//第二个图片要加上这个做圆角
}
.form_title_div span{
	display: block; margin-bottom: -130px; margin-left: 15px; color: #ffffff;
}

<div class="form_title_div" style="float: left;">
   <span>注册信息</span>
</div>
  • 大小: 1.2 KB
  • 大小: 1.3 KB
分享到:
评论

相关推荐

    梯形渐变图片.zip

    这个压缩包中的"jiaoben18164"可能是一个示例文件,包含实际的HTML、CSS和JavaScript代码,通过解压并查看这些文件,可以更深入地理解实现梯形渐变图片的细节。学习和研究这个项目可以帮助提升动态效果的创建技能,...

    形状不规则的tab标签选项卡代码

    本资源提供的是一个形状不规则的Tab标签选项卡代码,原代码可能来自其他网站,经过改造后具有独特的设计风格。 Tab标签的实现通常基于HTML、CSS和JavaScript。在HTML中,我们可以创建一系列的`&lt;div&gt;`或`&lt;ul&gt;`元素来...

    div-css制作多边形.zip

    通过设置`div`的宽高和内边距,我们可以创建出一个基本的矩形区域。然而,仅凭`div`本身是无法直接绘制出非矩形形状的,所以我们需要借助CSS的特性和技巧。 CSS中,主要依靠两个技术来制作多边形:`transform`属性...

    css实现多边形和梯形盒阴影技巧

    在这个例子中,我们需要为一个梯形盒子添加阴影。为了实现这一效果,我们可以按照以下步骤操作: 1. **HTML 结构**: 首先,创建HTML结构,包含一个主容器`.m-tab-page-box`,以及一个覆盖元素`.m-tab-page-cover`...

    CSS实现梯形标签页的方法

    我们可以为这个div添加一个类名,例如`.div`,然后为其设置`position: relative`和`display: inline-block`属性,以确保元素可以独立显示并调整大小。接下来,我们使用伪元素`:before`来创建一个矩形,并将其定位在...

    CSS DIV制作梯形状的不规则网站导航

    前段时间做一个小项目碰到了一个导航制作的方式然后突然想到曾经很久以前看到的梯形状的不规则导航,就尝试做了一下。结果碰到了几个问题,后来在同事的提醒下总算完成了,记录一下也跟大家分享分享。 先看图(图片...

    CSS画一个向上的直角.docx

    在标准的四方形元素中,每个边框都是一个等腰梯形。通过调整元素的宽度和高度,我们可以让这个四方形缩小到一个点,从而形成一个三角形。关键在于,通过改变边框的颜色和可见性,可以选择性地隐藏或显示某些边,以...

    边框实现各种图形.html

    用边框实现各种图形,包括三角形,梯形,大风车等形状 div{ width: 0px; height: 0px; border-style:solid; border-color: purple transparent transparent transparent; border-width: 20px;

    小学五年级上册数学课件_组合图形的面积.ppt

    锦旗的形状是一个直角梯形,底为60厘米,顶为30厘米,高为45厘米。计算面积使用梯形面积公式:\((a + b) \times h \div 2\),其中\(a\)是上底,\(b\)是下底,\(h\)是高。所以面积是 \((60 + 30) \times 45 \div 2 = ...

    html实现李峋爱心,百分百复刻

    例如,使用伪元素`:before`和`:after`可以创建两个半圆,而一个带有旋转角度的梯形可以创建爱心的尖端: ```css .heart { position: relative; width: 100px; height: 90px; } .top-half, .bottom-half { ...

    jQuery点击打开爱心信封特效.zip

    例如,可以设置一个梯形的信封开口: ```css #envelope { width: 200px; height: 200px; perspective: 500px; border: 1px solid #ccc; transform-style: preserve-3d; } ``` 再通过CSS3的伪元素和...

    会跳动的爱心源码 - 纯css实现

    每个半心形可以由一个梯形和一个三角形组合而成,通过改变元素的边框宽度和边框半径,可以调整形状。以下是一个简单的示例: ```html &lt;div class="heart"&gt;&lt;/div&gt; ``` 接着,我们需要使用CSS来定义爱心的样式。首先...

    Unit6-04:面积梯形

    在创建梯形的示例中,我们可能需要用到`&lt;div&gt;`元素,这是一个通用容器,可以容纳其他HTML元素。我们可以设置`&lt;div&gt;`的宽度、高度以及边框来模拟梯形的形状。例如: ```html &lt;div class="trapezoid" style="width: ...

    十个经典的导航菜单

    7. **menu_007_zip**: 可能是一个具有创新性或者异形的导航布局,例如圆形、梯形或其他非标准形状,以独特方式吸引用户注意力。 8. **menu_008_zip**: 可能是使用了汉堡菜单(也称为滑动门菜单),常用于移动端,...

    纯CSS实现单一div的正多边形变换

    本文主要探讨如何仅使用CSS实现一个div从正三角形变为正八边形的变换,甚至通过动画效果形成正多边形的动态变换。这个技巧的关键在于巧妙运用边框宽度、div的宽高以及CSS的伪元素。 ### 正三角形 正三角形的创建...

    课程作业爱心HTML代码

    这个例子中,`.heart`类的元素使用了边框技巧,而`:before`伪元素则添加了另一个相交的梯形。通过调整边框宽度、颜色和旋转角度,可以改变爱心的大小、颜色和倾斜度。 4. **SVG爱心**:对于更复杂的动画效果或精细...

    纯CSS3绘制可爱的青蛙表情

    例如,一个大的圆形代表头部,两个小的圆形代表眼睛,矩形或梯形可以用来制作身体和嘴巴。 接着,利用CSS3的伪元素`:before`和`:after`,我们可以为青蛙添加额外的细节,比如眼睛上的高光、嘴巴的形状或者背部的...

    shapeGen.js:shapeGen.js 允许人们轻松创建 CSS 形状

    **shapeGen.js: 一款轻松创建CSS形状的JavaScript库** 在网页设计中,CSS(Cascading Style ...这个库提供了一个直观的工具,使得CSS形状的创建变得简单而高效,无论对于专业开发者还是初学者,都是一个有价值的资源。

    收藏的几个经典的css样式表示例

    例如,我们可以创建一个梯形的山峰形状,通过设置元素的`transform: skewX()`属性来倾斜元素,然后利用`:before`和`:after`伪元素来填补倾斜后留下的空白。这里是一个简单的示例: ```css .mountain { position: ...

Global site tag (gtag.js) - Google Analytics