Creating a triangle above a square: Step-by-step guide

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

I am attempting to design a square with a triangle resting on top. While I have made some progress, the code below is the closest I could get:

.square {
  width: 20px;
  height: 20px;
  background: #FF0000;
  outline: 1px solid #000;
  outline-offset: 4px;
}

.arrow::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #000;
}
<div class='square arrow'></div>

Does anyone have suggestions on how to address this issue?

htmlcss

Answer №1

If you prefer not to alter the html structure.

Utilize box-shadow for generating the red square with a border rather than an outline.

Additionally, employ ::before and ::after to craft the arrow.

body {
  height: 100vh;
  display: grid;
  place-items: center;
}

* {
  box-sizing: border-box;
}

.square {
  --l: 50px;
  --p: calc(var(--l) / 6);
  --bd-width: 1px;
  width: var(--l);
  height: var(--l);
  position: relative;
  border: var(--bd-width) solid #000;
  border-top: none;
  box-shadow: inset var(--p) 0 0 white, inset 0 var(--p) 0 white, inset calc(var(--p) * -1) 0 0 white, inset 0 calc(var(--p) * -1) 0 white, inset var(--l) 0 0 #ff0000;
}

.arrow::before,
.arrow::after {
  --deg: 20deg;
  --l-top: calc(var(--l) / 2 / cos(var(--deg)));
  position: absolute;
  content: "";
  width: var(--l-top);
  height: var(--bd-width);
  background: #000;
  top: 0;
}

.arrow::before {
  left: calc(var(--bd-width) * -1);
  transform: rotate(calc(var(--deg) * -1));
  transform-origin: 0 0;
}

.arrow::after {
  right: calc(var(--bd-width) * -1);
  transform: rotate(var(--deg));
  transform-origin: 100% 0;
}
<div class='square arrow'></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent a button on my side bar from being clicked until the user has logged in?

How can I use Django and HTML to disable a button in my tab bar until a user is logged in? This is my sidebar: <div id="mySidebar" class="sidebar"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <a href ...

pythonhtmldjango

How to position images in the center horizontally using CSS without using percentage (%) measurements

There seems to be some excess space on the right side of my gallery... The container for my images: .my-gallery figure { display: block; float: left; width: 150px; } Is it possible to always horizontally center images on different screen sizes wit ...

htmlcss

Is it possible to activate the jQuery .click() function for a button with specific text?

Here's a dilemma I'm facing: $('.add_to_cart span:contains("Choose a Size")').click(function() { console.log("it has been clicked") }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></s ...

javascripthtmljquery

Implementing class styles using jQuery; however, certain styles fail to be effectively applied

As a beginner, I am experimenting with applying CSS class styles using jQuery. Specifically, I am trying to set two class attributes: color and font size. Surprisingly, only the color attribute is being applied despite both attributes being defined under t ...

jqueryhtmlcss

Can the TEXT from a <select> be passed as the value of a hidden <input> element?

<form method="POST" action="question-function.php"> <label>Choose Category</label> <select name="catid" id="catid" class="form-control"> <?php $sel3 = mysqli_query($ ...

phphtml

The page appears to be too wide for its intended dimensions

Currently, I am developing a single-page website located at . The issue I am facing is that the page appears larger than 100% despite there not being any code elements causing this distortion. To create this website, I am utilizing PHP for fetching Faceboo ...

phpjqueryhtmlcss

Guide on loading iframe content in a popup box

Wondering how to display iframe content within a popup div? Simply click on any link and watch the popup div open with the page URL loaded into the iframe. $(document).ready(function(){ $(".openpop").click(function(){ var x = $(this).attr('href ...

jqueryhtml

Align objects in two columns with varying heights properly

I'm trying to arrange items in two columns like Wallapop, but this is the best I've come up with so far: https://i.sstatic.net/1yBqJ.png Here is a JSFiddle link where you can edit the code: https://jsfiddle.net/52qdnLcg/ .parent { backgrou ...

htmlcssalignmentheight

What could be causing the delay in my IP camera image updates?

I have implemented a jQuery script to update the src attribute of an <img> element on a webpage at regular intervals. However, I am facing an issue where the image is not consistently updated according to the specified setInterval. Interestingly, dir ...

jqueryhtmlip-camera

Tips for updating the font color of BarMenu in Blazorise

I am struggling to change the default font color of the bar menu to red in a razor page. Despite trying the code below, it doesn't seem to work: <Bar Breakpoint="Breakpoint.Desktop" Background="Background.Light" ThemeContr ...

c#htmlcssasp.net-coreblazorise

How to preselect a radio button in an Angular radio button group list?

Having an issue with setting a default radio button as checked when the page loads in my Angular 7 and HTML project. I am able to retrieve the value but struggling to mark a radio button as checked during the page load. Any advice on how to resolve this wo ...

htmlangularngforradiobuttonlist

What is the best way to enclose an h2 with a designated class, along with the following two elements, inside a wrapper class?

Looking to select a specific block of code to wrap with a class using the jQuery .wrapAll method. I need to target the <h2> element and the two elements that follow it. Unfortunately, the elements before and after this block are inconsistent, ruling ...

jqueryhtml

When pressed, the button changes color to a vibrant shade of blue, and not just a simple outline

I'm experiencing an issue with a button that turns blue when the user holds onto it for a while on mobile. You can see an example in the image below: https://i.sstatic.net/VmnZ8.png Adding ::selected or outline did not resolve the problem as the ent ...

javascripthtmlcss

Creating an HTML file using PUG in a local environment (using npm and gulp)

Is there a way to automatically generate an HTML file with the same name as my Pug file whenever I save using gulp? I've checked all the documentation on but it only explains how to return Pug content in console... ...

javascripthtmlnpmgulppug

Can you specify the exact image name/path referenced in this CSS file?

I encountered a website that featured a copy image button. Upon inspecting the source code to locate the path or name of the PNG image used, I came across the following CSS. Can someone please help me identify where or what the path/name of the image is in ...

cssbase64

Display a different image while another image is in the process of loading

I am currently facing an issue with a div that has a background image set up as follows: <div class="carousel-image" style="background: url(img/background.gif) no-repeat center center;"> </div> Upon loading my webpage, there is a brief ...

javascripthtmlcssbackground-image

What is the best way to align bullet points in CSS lists?

These bullet points in my list are not aligned properly, and I am looking for a way to make them even. I remember finding a solution before, but I can’t seem to locate it now. Any assistance would be greatly appreciated. ...

htmlcsslist

JavaScript array images are not showing when using the img tag

For this module, I am working on creating a flipbook (magazine) using images stored in a JavaScript array. However, I am facing an issue where the images are not loading up properly. Instead of displaying the image, it shows as [object" htmlimageelement]=" ...

javascriptjqueryhtmlcss

How can I retrieve the value of a <span> element for a MySQL star rating system?

Source: GitHub Dobtco starrr JS plugin Implementing this plugin to allow users to evaluate a company in various categories and store the feedback in a MySQL database. Enhancement: I have customized the javascript file to enable the use of star ratings fo ...

javascriptphphtmlmysqltwitter-bootstrap

Is the margin missing from the first `li` element in the second column of the `ul`?

How can I apply a top margin to each li element within a ul element that utilizes the css property column-count: 2? I am facing an issue where the margin is being applied to every li element except the first one in the second column: ul { column-count ...

htmlcss