Кнопка в форме треугольника с иконкой CSS с помощью Bootstrap 4

Question

Я пытаюсь создать кнопку CSS треугольной формы, которая находится в верхнем левом углу div, используя Bootstrap 4 .

Через магию Photoshop , вот что я пытаюсь сделать.

Но вот самое близкое, что я смог получить со всеми своими пробами и ошибками.

Я пытаюсь сделать так, чтобы кнопка получала свои цвета от одного из btn-*style* классов, чтобы любой цвет могиспользоваться.

Любая помощь?

Вот этот треугольник 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>

Answer 1

Я использовал фоновый линейный градиент, чтобы решить вашу проблему. Будьте осторожны: этот трюк работает только с белым фоном, потому что я установил маску белого треугольника в псевдоэлементе ::after, чтобы продолжать использовать btn-*style* классы начальной загрузки. Если вы измените row фон, не забудьте также изменить цвет ::after mask!

РЕДАКТИРОВАТЬ 1: Я поставил треугольник в абсолютное положение, чтобы он не мешал системе начальной загрузки col (вы можете удалить его, как хотите)

.row {
    position:relative;
    min-height:100px;
}

.triangle {
    display:block;
    width:50px;
    height:50px;
    font-size:21px;
}

.triangle::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:linear-gradient(to left top, #ffffff 49%, transparent 50%);
}

i {
    position:absolute;
    top:5px;
    left:5px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" media="screen" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="container">
    <div class="row border rounded mx-2 mt-3 shadow-sm">

        <a href="#" class="triangle btn-warning position-absolute">
            <i class="fa fa-star-o" aria-hidden="true"></i>
        </a>

       
    </div>

    <div class="row border rounded mx-2 mt-3 shadow-sm">

        <a href="#" class="triangle btn-info position-absolute">
            <i class="fa fa-star-o" aria-hidden="true"></i>
        </a>

        
    </div>

    <div class="row border rounded mx-2 mt-3 shadow-sm">

        <a href="#" class="triangle btn-danger position-absolute">
            <i class="fa fa-star-o" aria-hidden="true"></i>
        </a>

        
    </div>
</div>

Answer 2

У меня есть фрагмент без использования фреймворков, надеюсь, это поможет вам.

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>