- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
最佳答案
您可以通过在 CSS 中绘制一个形状来做到这一点。
您可以在 CSS 中通过调整零宽度元素的不同边框(上、右、左下)来绘制这样的三 Angular 形。
示例:https://css-tricks.com/snippets/css/css-triangle/
在下面的示例中,我使用伪元素 :after
来实现此效果:
/* Apply styles to both DIVs */
.container > div {
width: 50%;
float:left;
font-weight: bold;
padding-left: 10px;
/* include padding in the height/width */
box-sizing: border-box;
margin: 0;
}
.container {
/* One way to make the DIV height extend to full heihgt of `float:left` DIVs inside it. Not the only way */
clear: both;
}
.container div:first-child {
background: #66ff66;
/* The triangle will be position:absolute, so it requires a `position:relative` parent */
position: relative;
/* We are drawing a full rectangle later, so we hide the rest of it */
overflow: hidden;
}
.container div:last-child {
background: #ff6666;
}
.container div:first-child:after {
position: absolute;
display: block;
content: ' ';
padding: inherit;
box-sizing: border-box;
/* Change below units (you can use px not just em)
to make the line become at different angles */
border-top: 1.3em solid transparent;
border-bottom: 1.3em solid transparent;
border-right: 1.3em solid #ff6666;
right: 0;
top: 0;
}
<div class="container">
<div>div١</div>
<div>div٢</div>
</div>
但是正如您在评论中指出的那样,您想要一个使用 div2 作为三 Angular 形的不同答案,所以您在这里:
/* Apply styles to both DIVs */
.container > div {
width: 50%;
float:left;
font-weight: bold;
/* include padding in the height/width */
box-sizing: border-box;
margin: 0;
}
.container {
/* One way to make the DIV height extend to full heihgt of `float:left` DIVs inside it. Not the only way */
clear: both;
}
.container div:first-child {
background: #66ff66;
padding-left: 10px;
}
.container div:last-child {
background: #ff6666;
position: relative;
padding-left: 1.3em;
}
.container div:last-child:before {
position: absolute;
content: '';.
width: 0;
height: 0;
box-sizing: border-box;
/* Change below units (you can use px not just em)
to make the line become at different angles */
border-top: 1.3em solid #66ff66;
border-bottom: 1.3em solid transparent;
border-right: 1.3em solid transparent;
top: 0;
left: 0;
}
<div class="container">
<div>div١</div>
<div>div٢</div>
</div>
您在评论中显示的图片还包含真实边框。这需要改变方法。新方法仍然使用 :before
,但为其添加了边框,并将其旋转 45 度。
这个想法是基于一个例子:https://kilianvalkhof.com/2017/design/sloped-edges-with-consistent-angle-in-css/
想象一下:
代码如下:
/* Apply styles to both DIVs */
.container > div {
width: 50%;
float:left;
font-weight: bold;
/* include padding in the height/width */
box-sizing: border-box;
margin: 0;
}
.container {
/* One way to make the DIV height extend to full heihgt of `float:left` DIVs inside it. Not the only way */
clear: both;
}
.container div:first-child {
background: #66ff66;
padding-left: 10px;
border: 1px solid;
border-right: none;
}
/*
The following assumes diemnsions 1.3em * 1.3em
Your real case can change the number
*/
.container div:last-child {
background: #ff6666;
position: relative;
border: 1px solid;
border-left: none;
padding-left: calc(1.5 * 1.3em);
overflow: hidden;
}
.container div:last-child:before {
position: absolute;
content: '';
width: calc(2 * 1.3em);
height: calc(2 * 1.3em);
box-sizing: border-box;
background: #66ff66;
border: 1px solid ;
transform:rotate(45deg);
margin-top: -1.3em;
margin-left: -1.3em;
left: 0;
top: 0;
}
<div class="container">
<div>div١</div>
<div>div٢</div>
</div>
关于html - 我怎么能做一个斜方肌div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54295878/
我有一个右下角倾斜的元素,我必须在其上放置一个盒子阴影。有时倾斜的 Angular 被徽章覆盖 - 我的问题不适用,如果是这样的话: 这是信息框及其边 Angular 的 (s)css 部分(还有更多
是否可以在纯 html/css 中创建类似下面的内容? 我想做这个响应式和全 (100%) 宽度(最大左 Angular 100 像素,右边最小 50 像素,类似的东西)。 最佳答案 您可以通过转换(
如何在 fabricjs 文本中为文本提供渐变或斜 Angular 效果?? http://fabricjs.com/fabric-intro-part-2/ 这里给出了形状和所有示例,我将其与文本绑
我用过: http://apps.eky.hk/css-triangle-generator/ 为彼此对 Angular 放置的两个不等边三 Angular 形生成 css: 左下三 Angular
我是一名优秀的程序员,十分优秀!