如何用HTML编写长方体框架,直角梯形长方体形状_html

不需要額外的形狀元素

形狀可以創建僅包含該

:左側是創建的div left，top和bottom邊框。

右側是由 :before及其上，右和底部邊框

跨越加入兩個框創建的 :after感謝 skewY

Note的瀏覽器支持transform屬性。 ie 9 需要的 -ms-前綴以及Safari和Android瀏覽器要求 -webkit-.

運行示例不僅僅是形狀

CSS已緊縮和的邊框樣式偽元素繼承自div本身。

div {

border: solid 4px #000;

border-right-width: 0;

width: 100px;

height: 200px;

position: relative;

}

div:before,div:after {

content: '';

display: block;

height: 100%;

width: 100%;

border: inherit;

border-right-width: 4px;

border-left: none;

position: absolute;

left: 100%;

top: 13px;

margin-left: 20px;

}

div:after {

width: 20px;

border-right: none;

top: 5px;

transform: skewY(40deg);

margin: 0;

}

帶有文本的工作示例

使用上面的示例，裡面包含的內容將不被整個形狀。，而是將約束在div內半形。內容需要被包裝在一個與200%寬度與衝壓在外面div的約束。

div {

border: solid 4px #000;

border-right-width: 0;

width: 100px;

height: 200px;

position: relative;

}

div:before,div:after {

content: '';

display: block;

height: 100%;

width: 100%;

border: inherit;

border-right-width: 4px;

border-left: none;

position: absolute;

left: 100%;

top: 13px;

margin-left: 20px;

}

div:after {

width: 20px;

border-right: none;

top: 5px;

transform: skewY(40deg);

margin: 0;

}

span {

width: 200%;

display: block;

padding: 20px 10px 10px;

}

This is me writing a large amount of words into the div. I think that you may want a span in order to contain them.

如何用HTML编写长方体框架,直角梯形长方体形状_html_开发99编程知识库相关推荐

如何用css实现一个小直角梯形
原理就是前端三角形整体是用flex做一个左右结构 → 右边上下结构 → 右上又是上下结构 → 右边的上下都是用前端三角形来做,上面那个三角形宽高为0,左边框设置40px和颜色 → 下 ...
CSS 如何用border绘制三角形、等腰梯形、直角梯形
CSS 如何用border绘制三角形.等腰梯形.直角梯形 border 有宽度后,四角交接处会产生斜线,可根据此原理绘制三角形.等腰梯形.直角梯形等图形. div {width: 50px;heigh ...
python rest api 测试_如何用Python编写REST API的单元测试
在过去的几个月中,正在从事一个名为B的项目.它是带有简单Web UI的徽章生成器,用于添加数据并生成PDF可打印徽章.B后端现在已转移到REST-API并测试REST-API中使用的功能,我们需要一些 ...
如何用PHP编写简单的api数据接口
一.编写接口所需几样工具或软件(均是win7+64位) 1.phpStudy.SQLyog和编码工具的安装(sublime text/webStorm/vs code均可,按自己习惯来): 2.启动p ...
SAP UI5 应用开发教程之八十五 - 如何用 OPA5 编写测试用例来测试用户输入文本的功能试读版
一套适合 SAP UI5 初学者循序渐进的学习教程作者简介 Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今.Jerry 是 SAP 社区导师,S ...
python写乘法口诀-如何用python编写乘法口诀表
如何用python编写乘法口诀表?首先要明确一下思路,我们可以确定x,y两个变量,弄清楚其变化的规律,再使用循环嵌套实现.下面是如何用Python编写乘法口诀表的具体方法. 第一种:使用for遍历循环 ...
c语言switch写值班表,如何用asp编写按周轮换的值班表？例，1月份的值班领导有4位，怎样写可以让4位领导的名字自动到时间显示...
如何用asp编写按周轮换的值班表?例,1月份的值班领导有4位,怎样写可以让4位领导的名字自动到时间显示以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容 ...
ios15之把自己编写的框架上传到CocoaPods里面
ios15之把自己编写的框架上传到CocoaPods里面最近有个需求,把自己的写的框架上传到CocoaPods里面.使用 pod 安装到本地项目里面. 首先github新建一个仓库名,协议MIT,公 ...

如何用HTML编写长方体框架,直角梯形长方体形状_html_开发99编程知识库

如何用HTML编写长方体框架,直角梯形长方体形状_html_开发99编程知识库相关推荐

最新文章

热门文章