gpt4 book ai didi

twitter-bootstrap - 如何制作对 Angular 线div

转载 作者:行者123 更新时间:2023-11-28 11:32:26 26 4
gpt4 key购买 nike

我正在尝试制作对 Angular 线 div,所以我可以创建这个形状: How to make diagonal div 我使用 bootstrap 网格,我已经为形状制作了三个 div 容器。

它将由 3 个部分组成,其中 2 个是对 Angular 的,1 个是直的。我做了三个部分。但我不知道如何使它成为对 Angular 线。

example in codepen

html:

    <body ng-app="appt" ng-controller="AppController" >
<div class="row test-row">
<div class="col-lg-4 test-outbox">
<div class="test-inbox test-inbox-center col-lg-10 col-lg-offset-1">
<span class="test-s"></span>
<span class="test-s"></span>
<div class="test-d"></div>
</div>
</div>
<div class="col-lg-4 test-outbox">
<div class="test-inbox test-inbox-center col-lg-10 col-lg-offset-1">
</div>
</div>
<div class="col-lg-4 test-outbox">
<div class="test-inbox test-inbox-center col-lg-10 col-lg-offset-1"></div>
</div>
</div>
</body>

样式:

    .test-row{
width: 100%;
margin-right: 0;
margin-left: 0;
position: fixed;
top: 100px;
}

.test-outbox{
border:1px black solid;
height:350px;
}

.test-inbox-center {
height: 300px; /*your login box height*/
position: absolute;
top: 50%;
margin-top: -150px; /*height/2*/
border:1px black solid;
border-radius: 3px;
background-color:white;
padding: 0;
}
.test-s:nth-child(even){
height: 100px;
width: 76px;
top: 150px;
position: absolute;
border:1px black solid;
right: 0;
}
.test-s:nth-child(odd){
height: 100px;
width: 76px;
top: 150px;
position: absolute;
border:1px black solid;
left: 0;
}
.test-d{

}

最佳答案

请检查这个fiddle .

这是代码

HTML

<div class="mainOuterDiv">
<div class="middDiv">
<div class="innerLeft"></div>
<div class="innerRight"></div>
<div class="textDiv"></div>
</div>
</div>

CSS

.mainOuterDiv{
width:200px;
height:200px;
border:solid 2px #0CF;
overflow:hidden;
background:#FFF;
}
.middDiv{
width:70%;
height:30px;
border:solid 2px #0CF;
margin:0px auto;
position:relative;
margin-top:50%;
}
.innerLeft{
position: absolute;
left: -32px;
top: -13px;
border: solid 2px #0CF;
width:20%;
height:100%;
z-index: 1;
transform: skew(180deg,215deg);
}
.innerRight{
position:absolute;
border:solid 2px #0CF;
right:-32px;
top: -13px;
width:20%;
height:100%;
z-index: 1;
transform: skew(180deg,145deg);
}
.textDiv{
background:#fff;
z-index:9999;
width:100%;
height:100%;
position:absolute;
}

谢谢

关于twitter-bootstrap - 如何制作对 Angular 线div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34104128/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com