Creating a Triangular Button with Icon Design with Bootstrap 4

Question

Creating a Triangular Button with Icon Design with Bootstrap 4

I'm attempting to design a CSS triangular button that is positioned in the top left corner of a div using Bootstrap 4.

Here's my concept as crafted with Photoshop:

https://i.sstatic.net/cbUWL.png

However, after numerous attempts, this is the closest I've come to achieving it:

https://i.sstatic.net/RkKnd.png

I want to style it so that the button can adapt its colors based on one of the btn-*style* classes, allowing for versatility in color selection.

Any suggestions?

Below is the triangle CSS code snippet:

.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;
    }

And here is the current div layout I am utilizing:

<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>

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

Here is a code snippet that does not rely on any Frameworks, which could be useful for you.

function myFunction(){
alert("Hello, it's working");
}

.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>

Answer 2

Here is a code snippet that does not rely on any Frameworks, which could be useful for you.

function myFunction(){
alert("Hello, it's working");
}

.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>

Answer 3

Answer №2

To tackle the issue at hand, I employed a background linear gradient solution. It's worth noting that this workaround is specifically designed for white backgrounds. This is because I utilized a white triangle mask in the ::after pseudo element to ensure compatibility with the btn-*style* bootstrap classes. If you decide to alter the background color of the row, remember to adjust the color of the ::after mask accordingly!

UPDATE 1: I positioned the triangle absolutely to prevent any interference with the bootstrap col system (you can remove it if desired)

.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 4

To tackle the issue at hand, I employed a background linear gradient solution. It's worth noting that this workaround is specifically designed for white backgrounds. This is because I utilized a white triangle mask in the ::after pseudo element to ensure compatibility with the btn-*style* bootstrap classes. If you decide to alter the background color of the row, remember to adjust the color of the ::after mask accordingly!

UPDATE 1: I positioned the triangle absolutely to prevent any interference with the bootstrap col system (you can remove it if desired)

.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>

Creating a Triangular Button with Icon Design with Bootstrap 4

Answer №1

Answer №2

Similar questions

Scroll Behavior Issue in Bootstrap 4.4.1 Accordion Component on Google Chrome - Possible Bug?

Enhance the numerical value displayed in jQuery UI tooltips

Can Python be used to determine if a website is responsive?

Making a form select element responsive within a bootstrap 4 card component

Error: Unable to locate module '@material/core/Grid'

Incorporate text into the URL of the image

Vue.js fails to display multiple uploaded images

interactive navigation menu with countdown feature

Experience the smooth transition effects of sliding down the login box when hovering over an image or div

Angular 6 - Implementing a collapsible mobile menu with a click event

Processing AJAX request without reloading the page using PHP

Persistent Footer and Internet Explorer Compatibility

Tips for ensuring Opera browser compatibility with buttons using the CSS background image property

CSS: Create a form with two input fields where the left field is adjustable in width and the right field fills up

The function I created is having trouble connecting to the controller.js file

Combine Two Values within Model for Dropdown Menu

Ways to avoid a child element from overlapping another element

What is the method for calculating values entered into dynamic input fields?

What is the method used to create the scrolling effect on this website?

What is the best way to position the logo on the left side and the navigation on the right