Triangle shape create before and after

PHOTO

Wed Mar 20 2024 12:00:22 GMT+0000 (Coordinated Universal Time)

/*html content*/

<div class="flex-box">

  <div class="square top"></div>

  <div class="square bottom"></div>

  <div class="square left"></div>
  
  <div class="square right"></div>
  
</div>  
/*css content*/


/* flex-box */
.flex-box {
  display: flex;
  width: 100%;
  margin-top: 75px;
}

/* square */
.square {
  background-color: pink;
  height: 200px;
  width: 200px;
  margin: auto;
  border: black solid 2px; 
  position: relative;
}


/* creating a pseudo element square with a border top and left that is then rotated 45deg and positioned on top of the box to look like a triangle - this one has been coloured peach to provide visual explanation  */
.top::after {
  content: '';
  height: 20px;
  width: 20px;
  position: absolute;
  background-color: peachpuff;
  top: -12px;
  left: 45%;
  border-top: black solid 2px;
  border-left: black solid 2px;
  transform: rotate(45deg);
}

/* only change degrees on rotate and bottom position */
.bottom::after {
  content: '';
  height: 20px;
  width: 20px;
  position: absolute;
  background-color: pink;
  bottom: -12px;
  left: 45%;
  border-top: black solid 2px;
  border-left: black solid 2px;
  transform: rotate(225deg);
}

/* changed transform:rotate deg's, top and left */
.left::after {
  content: '';
  height: 20px;
  width: 20px;
  position: absolute;
  background-color: pink;
  top: 45%;
  left: -12px;
  border-top: black solid 2px;
  border-left: black solid 2px;
  transform: rotate(-45deg);
}

/* changed transform:rotate deg's, top and right */
.right::after {
  content: '';
  height: 20px;
  width: 20px;
  position: absolute;
  background-color: pink;
  top: 45%;
  right: -12px;
  border-top: black solid 2px;
  border-left: black solid 2px;
  transform: rotate(135deg);
}

COPY

Tringale shape

Save snippets that work from anywhere online with our extensions

Comments

More like this

##css

Adding Fonts

<!DOCTYPE html>
<html>
 
<head>
    <!-- importing fonts from google fonts-->
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;1,300&display=swap" rel="stylesheet">
     
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Cool Website</title>
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
    <header>
        <!- navbar content ->
    </header>
</body>

##css

Table Format CSS

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="FormStyles.css" rel="stylesheet" />
</head>
<body>
    <section>
    <h1>My Form Example</h1>
    <form action="ThankYou.html" method="get">
        <label for="txtName">Name:</label>
        <input id="txtName" type="text" />
        <br />
        <label for="txtEmail">Email:</label>
        <input id="txtEmail" type="email" />
        <br />
        <label for="txtDOB">Date of Birth:</label>
        <input id="txtDOB" type="date" />
        <br />
        <label for="txtCountry">Country:</label>
        <input id="txtCountry" type="text" list="countries"/>
        <datalist id="countries">
            <option value="Australia"></option>
            <option value="Mongolia"></option>
            <option value="China"></option>
        </datalist>
            <br />

            <input id="Submit" type="submit" value="submit" />
            <input id="Reset" type="reset" value="reset" />
</form>
</section>
</body>
</html>



body {
    background-color:blue;
}

h1{
    color:white;
    text-transform:uppercase;
    text-align:center; 
    text-shadow:5px 5px #444444; 
}

section{
    width:430px; 
    margin:auto; 
    background-color:#c9d0de;
    border: 5px solid #888888;
    border-radius: 5px; /*rounded borders*/
    padding:30px; 
    box-shadow:10px 10px 5px #888888;
}

label{
    display:inline-block; 
    width:100px; 
}

input{
    width:260px; 
    border-radius:5px; 
}
input[type=submit], input[type=reset]{
    width: 125px; 
    height: 52px; 
    margin-top:5px; 
}
 input[type=submit]{
     margin-left:100px; 
 }

 input:focus{
     background-color:#c9d0de; 
 }

##css ##sprite ##animation

Animate.css | A cross-browser library of CSS animations.

https://animate.style/

##css ##boostrap

BOOSTRAP

undefined

##html ##css

Center text on img

/* HTML */  
<div class="main-img">
    <img class="main-pic" src="https://ableton-production.imgix.net/about/header.jpg?auto=format&fit=crop&fm=jpg&h=822&ixjsv=1.1.3&w=1333" alt="ableton header img">
    <h1 class="title-text centered">Ableton</h1>
  </div> 

/* CSS */ 
.main-img {
  position: relative;
}

.title-text {
  position: absolute;
  bottom: 50%;
  right: 50%;
  color: orange;
  padding-left: 20px;
  padding-right: 20px;

##html ##css #javascript #fontawesome #bulma #boilerplate #imports

Boilerplate & Imports

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title></title>

	/* CSS STYLESHEET */

	<link rel="stylesheet" href="styles.css">

	/* BULMA */

 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
      
	/* FONTAWESOME */
      
	<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" data-auto-	a11y="true"></script>


</head>

<body>
      
	/* JAVASCRIPT SCRIPTS /*
    
	<script src="script.js"></script>

</body>
</html>

##html ##css

Rating-Color

    <div class="rating-wrapper wrap-color">
        <input type="radio" name="rating" id="star-5">
        <label for="star-5">✫</label>

        <input type="radio" name="rating" id="star-4">
        <label for="star-4">✫</label>

        <input type="radio" name="rating" id="star-3">
        <label for="star-3">✫</label>

        <input type="radio" name="rating" id="star-2">
        <label for="star-2">✫</label>

        <input type="radio" name="rating" id="star-1">
        <label for="star-1">✫</label>
    </div>

##html ##css

Rating-Primary

    <div class="rating-wrapper wrap-primary">
        <input type="radio" name="rating-2" id="solid-star-5">
        <label for="solid-star-5">★</label>

        <input type="radio" name="rating-2" id="solid-star-4">
        <label for="solid-star-4">★</label>

        <input type="radio" name="rating-2" id="solid-star-3">
        <label for="solid-star-3">★</label>

        <input type="radio" name="rating-2" id="solid-star-2">
        <label for="solid-star-2">★</label>

        <input type="radio" name="rating-2" id="solid-star-1">
        <label for="solid-star-1">★</label>
    </div>

##html ##css

alert-solid

      <p class=" alert status-plain-bg "> Thanks for visiting!</p>

      <p class=" alert status-info-bg ">This library is open for use</p>

      <p class=" alert status-warning-bg ">Documentation is Incomplete</p>

      <p class=" alert status-error-bg ">Download failed!</p>

      <p class=" alert status-success-bg ">Download successful!</p>

##html ##css

alert-outline

      <p class=" alert status-plain-outline">Thanks for visiting!</p>

      <p class=" alert status-info-outline">This library is open for use</p>

      <p class=" alert status-warning-outline">Documentation is Incomplete</p>

      <p class=" alert status-error-outline">Download failed!</p>

      <p class=" alert status-success-outline">Download successful!</p>

##html ##css

Button

      <button class="btn bg-primary">
        primary
      </button>

      <button class="btn bg-secondary">
        secondary
      </button>

      <button class="btn bg-default">
        default
      </button>

      <button class="btn bg-accent">
        Accent
      </button>

      <button class="btn outline-primary">
        primary
      </button>

      <button class="btn outline-secondary">
        secondary
      </button>

      <button class="btn outline-default">
        default
      </button>

      <button class="btn outline-accent">
        Accent
      </button>

##html ##css

Button - Link

<button class="btn btn-link bg-primary">
    <a href="./button.html">Link Primary</a>
</button>

<button class="btn btn-link outline-primary">
    <a href="./button.html">Link Outline-Primary </a>
</button>

##html ##css

button-icon

      <button class="btn btn-icon bg-secondary">
        <span><img src="/assets/like.svg" alt="like" class="icon"></span>
        Like
      </button>

      <button class="btn btn-icon outline-secondary">
        <span><img src="/assets/like.svg" alt="like" class="icon"></span>
        Like
      </button>

##html ##css

Button - Float

      <button class="btn btn-float bg-secondary round">
          <img src="/assets/like.svg" alt="like" class="float-item">
      </button>

      <button class="btn btn-float outline-secondary round">
          <img src="/assets/like.svg" alt="like" class="float-item">
      </button>

##html ##css

Input-form

   <form action="#" class="form">
       <div class="form-item status-success-outline">
           <input type="text" class="form-input" placeholder="name" aria-label="name" autocomplete="name">
       </div>

       <div class="form-item status-plain-outline">
           <input type="email" class="form-input" placeholder="email" aria-label="email" autocomplete="email">
       </div>

       <div class="form-item status-warning-outline">
           <input type="password" class="form-input" placeholder="password" aria-label="password">
       </div>

       <div class="form-item status-error-outline">
           <input type="password" class="form-input" placeholder="confirm password" aria-label="confirm password">
       </div>

       <fieldset class="form-item status-plain-outline">
           <legend>Gender</legend>
           <p>
               <label for="male">Male</label>
               <input type="radio" name="gender" id="male" checked class="">
           </p>
           <p>
               <label for="female">Female</label>
               <input type="radio" name="gender" id="female" class="">
           </p>
           <p>
               <label for="others">Others</label>
               <input type="radio" name="gender" id="others" class="">
           </p>
       </fieldset>

       <fieldset class="form-item status-plain-outline">
           <legend>Languages known</legend>
           <p>
               <label for="JavaScript">JavaScript</label>
               <input type="checkbox" name="gender" id="JavaScript" checked class="">
           </p>
           <p>
               <label for="Python">Python</label>
               <input type="checkbox" name="gender" id="Python" class="">
           </p>
           <p>
               <label for="Java">Java</label>
               <input type="checkbox" name="gender" id="Java" class="">
           </p>
       </fieldset>

       <div class="form-item status-plain-outline">
           <label for="coding-level">Coding Level:</label>
           <input type="range" name="coding level" id="coding-level" min="1" max="5">
       </div>

       <button class="btn bg-primary" type="submit">Hello</button>

   </form>

Triangle shape create before and after

Save snippets that work from anywhere online with our extensions

Comments

More like this

Browse more snippets >>

Embed code snippet