如何在div上制作直角三角形切口？
SanJeet Singh
这是我想要的结果：
我正在使用像这样的边框：
border: 10px blue solid;
border-right: 10px white solid;
但是它只是在右侧制作了一个梯形形状。有什么方法可以在纯CSS中实现我想要的功能吗？在div本身可能包含一些其他的DOM元素一样p，h1-h6或者其他一些div秒。
糯米饭
这很简单。只需使用以下CSS：
.shape {
border-top: 100px solid blue;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}<div class="shape"></div>编辑：
如果其中包含其他元素，则可以执行以下操作。
.shape {
background: blue;
height: 100px;
position: relative;
width: 150px;
color:white;
}
.shape::before {
background: blue none repeat scroll 0 0;
content: "";
height: 100px;
position: absolute;
right: -25px;
transform: skew(-20deg);
width: 50px;
}<div class="shape">
<span>Hello</span>
<div> Test message </div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何在div上制作直角三角形切口？
- 2
如何在 Python/PsychoPy 中绘制直角三角形？
- 3
直角三角形的实现
- 4
php - 直角三角形
- 5
如何使用Javascript数学库计算直角三角形的角度？
- 6
如何创建不带def功能的带星号的直角三角形？
- 7
如何使用python绘制直角三角形
- 8
如何在序言中使用递归绘制直角三角形？
- 9
检查三角形是否为直角三角形
- 10
C程序检测直角三角形
- 11
使用JavaScript计算直角三角形的边？
- 12
直角三角形的长度（Java Eclipse）：用户输入图
- 13
Java：显示由字符组成的奇数直角三角形
- 14
Codechef和直角三角形的斜率方法
- 15
直角三角形可能吗？
- 16
R基本图，合并镜像直角三角形
- 17
在Visual Basic中使用循环创建直角三角形
- 18
无法获得：创建直角三角形之后
- 19
使用嵌套的for循环python 3.x的直角三角形
- 20
该符号的直角三角形，其边等于该数字
- 21
Java：显示由字符组成的奇数直角三角形
- 22
Java计算非直角三角形中的角度点
- 23
确定“等腰直角三角形”中的顶点
- 24
在 C++ 中确定等腰直角三角形
- 25
如何打印出给定范围内直角三角形的周长和数量？
- 26
CSS使用实心填充将渐变应用于直角三角形形状
- 27
Javascript函数输出带换行符的字符串以创建直角三角形
- 28
使用 Java 为实验室打印带有 Astericks 的倒直角三角形
- 29
给定两个相似的直角三角形的高度之差，如何计算它们的底长之比？
我来说两句