个人中心
gpt4 book ai didi

html - 使用 Bootstrap 4 的带有图标的 CSS 三 Angular 形按钮

转载 作者：太空宇宙 更新时间：2023-11-04 01:05:55 26 4
gpt4 key购买 nike

我正在尝试使用 Bootstrap 4 创建一个位于 div 左上角的 CSS 三 Angular 形按钮。

借助 Photoshop 的魔力，这就是我想要做的。

enter image description here

但这是我经过反复试验所能得到的最接近的结果。

enter image description here

我正在尝试以一种方式设置样式，使按钮从 btn-*style* 类之一获取颜色，以便可以使用任何颜色。

有什么帮助吗？

这是三 Angular 形 CSS

.triangle-up-left {
    float          : left;
    width          : 0;
    height         : 0;
    margin         : 0;
    padding-bottom : 10%;
    padding-left   : 10%;
    overflow       : hidden;
    text-align     : center;
    }

.triangle-up-left:after {
    content           : "";
    display           : block;
    width             : 0;
    height            : 0;
    margin-left       : -500px;
    border-bottom     : 500px solid transparent;
    border-left-width : 500px;
    border-left-style : solid;
    }

以及我正在使用的当前 div。

<div class="row border rounded p-2 mx-2 mt-3 shadow-sm">
    <a href="#" role="button" class="btn btn-warning triangle-up-left"><i class="far fa-star"></i></a>

    <div class="d-none d-sm-none d-md-block col-md-1 p-0 m-0  mx-sm-auto">
        <img src="...image.."" alt="Image" class="img-fluid rounded-circle m-3"></a>
    </div>

    <div class="col-md-9 pl-sm-0 pl-md-5 m-0 ">
     some text
    </div>

    <div class="col-sm-1 col-md-2  p-0 pt-4 m-0  text-center ">
        Some text
    </div>
</div>

最佳答案

我有一个没有使用任何框架的片段，希望这对你有帮助。

function myFunction(){
	alert("Hai, It works");
}
.box{
  background-color:white;
  width:50%;
  height:100px;
  border:1px solid gray;
  border-left:4px solid gray;
}
button>span{
  color:black;
  font-weight:bold;
  position:absolute;
  left:12px;
  z-index:1;
  top:15px;
  
}
button{
  cursor:pointer;
  background-image:url();
  width:50px;
  height:50px;
  background-color:transparent;
  border:none;
  font-size:1.2em;
  border-radius:7px;
  
}
button:focus {outline:0;}
button::before,
button::after {
    content: '';
    position: absolute;
    top: 7px;
    left: 7px;
    border-color: transparent;
    border-style: solid;
}

button::after {
    border-width: 1.3em;
    border-left-color: yellow;
    border-top-color: yellow;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="box">
    <button onclick="myFunction()"><span>☆</span></button>
  </div>
</body>
</html>

关于html - 使用 Bootstrap 4 的带有图标的 CSS 三 Angular 形按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52236839/

26 4 0
文章推荐： php - 什么设置(ab)使用node.js作为超快速轮询和ajax服务器来更新数据库(类似于Google Spreadsheet方法)
文章推荐： python - sklearn.ensemble ImportError 中的投票分类器
文章推荐： python - 在python中将信息写入csv
文章推荐： python - 在 Django 模型中存储对象列表
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com