css - 现在我可以在移动的幻灯片上添加一个角三角形吗?
问题描述
我正在使用 Bootstrap 4 Slider,我想应用以下单独工作的 CSS:
.container-p{
width: 600px;
height: 500px;
position:relative;
background-color:grey;
}
.corner {
width: 0;
height: 0;
border-top: 300px solid #ffcc00;
border-bottom: 300px solid transparent;
border-left: 300px solid transparent;
position:absolute;
float: right;
right:0;
}
.corner span {
position:absolute;
top: -220px;
width: 250px;
left: -220px;
text-align: center;
font-size: 30px;
font-family: arial;
transform: rotate(45deg);
display:block;
font-weight: bold;
}
<div class="container-p">
<div class="corner"><span>Comercio local</span></div>
</div>
问题是我想将这个三角形应用于“轮播项目”,所以我的全屏滑块显示每张幻灯片的类别。为此,我在 carousel-item 旁边添加了班级角落。
<div class="carousel-item corner"></div>
但我得到的只是白色背景。
我究竟做错了什么?
PD:每张幻灯片的内容都是一张图片,只有几句话。
解决方案
是的,您可以在每张幻灯片或单独的幻灯片上轻松添加三角形。您的 css 代码是正确的,但需要在.corner类中添加top:0 。
下面的代码片段正在使用您的 css 代码。
.corner {
width: 0;
height: 0;
border-top: 300px solid #ffcc00;
border-bottom: 300px solid transparent;
border-left: 300px solid transparent;
position:absolute;
float: right;
top: 0;
right:0;
}
.corner span {
position:absolute;
top: -220px;
width: 250px;
left: -220px;
text-align: center;
font-size: 30px;
font-family: arial;
transform: rotate(45deg);
display:block;
font-weight: bold;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="py-3">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/1200x650/CCCCCC" class="d-block w-100" alt="...">
<div class="corner"><span>Comercio local</span></div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1200x650/0000FF" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1200x650/00FFFF" class="d-block w-100" alt="...">
<div class="corner"><span>Comercio local</span></div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1200x650/f1f1f1" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
</div>
推荐阅读
- c# - 在 SignalR 方法中添加额外参数而不破坏更改
- android - 可展开的 ListView 不会在单击时展开/折叠
- go - 如何在 Golang 中删除大文件的前 N 个字节?
- node.js - 如何重构具有子查询的查询有点不同
- excel - 根据条件相乘的多个变量会产生错误
- android - 如何为您的适配器选择最佳构造函数?
- python - 如何使用 selenium python 查找网页中的链接总数
- ocaml - Ocaml #load 没有顶级?
- javascript - .create 和 .save 之间的猫鼬区别
- c# - 在读取 JSON 时使用 JSON Schema 来确定属性的数据类型