带有封闭设计元素的折叠式文本容器

问题描述 投票：-1回答：1

我正在尝试解决特定的设计任务，我不太确定哪种方法是最好的。

我已经找到一些css之字形，但是我不知道如何减少牙齿的数量以增加所需的设计度-60度和60度，以及如何使其相互进入并显示出不同的颜色用于包含的文本背景。

我不想使用Adobe Flash，我希望css也许可以使用具有透明背景的.png图像，但是我不知道如何做到这一点以获得与包含折叠元素，例如<button type="button" class="btn" data-toggle="collapse" data-target="#demo">和<div id="demo" class="collapse">

对于这样的牙齿，在body页的上方6齿和下方5齿：

enter image description here

[通过单击打开/关闭功能，我想可以使用js onclick =“ openclose（）;”在白色背景内包含文本，例如图像解决方案：

enter image description here

我不太清楚，解决该设计任务的最佳方法是什么，因此任何建议或示例都将非常有帮助

javascript html css
1个回答
0
投票
<body> 

<div class="upperJaw">
 //Your Jaw teeth design
</div>

<div class="yourContentText'>
some text
</div>

<div class="lowerJaw">
//Your Jaw teeth design
</div>

</body>


.upperJaw{
position: fixed;
left: 0;
width: 100%;
top: 0;
height: 49%;
}

.lowerJaw{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 49%;
}
.jawOpen .upperJaw{
top: -50%; 
}
.jawOpen .lowerJaw{
bottom: -50%;
}
//Add transition for top and bottom



function jawOpen(){
 $('body').addClass('jawOpen');
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.