Twofold Arrow Styling in CSS

Can someone help me achieve this design:

https://i.stack.imgur.com/eBQ1a.png

I am attempting to create a double arrow using just one class. I have tried various methods, but nothing seems to be working for me.

If anyone has any suggestions or can point me in the right direction, it would be greatly appreciated.

.wrapper{
  width: 250px;
  height: 150px;
  background:black;
}
.arrow1{  
  left:0px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 37.5px 0 37.5px 75px;
  border-color: transparent transparent transparent #007bff;
}
<div class="wrapper">
    <div class="arrow1"></div>
</div>

https://jsfiddle.net/7mfquq2y/

Thank you.

htmlcsssvg

Answer №1

One way to achieve a unique design is by using pseudo elements and rotation:

.arrow1 {
  height: 120px;
  width: 100px;
  overflow: hidden;
  position: relative;
}

.arrow1:before,
.arrow1:after {
  content: " ";
  position: absolute;
  width: 60px;
  height: 60px;
  background: rgba(0, 128, 0, 0.6);
  transform: rotate(45deg);
  left: -30px;
  top: 40px;
}

.arrow1:after {
  top: 20px;
}
<div class="arrow1"></div>

Answer №2

In an alternate approach, you can set initial border property values for pseudo-elements, as illustrated in the following code snippet.

Code Snippet Example:

.container{
  width: 250px;
  height: 150px;
  background:black;
}
.pointer {
  height: 95px;
  position: relative; /* necessary */
}
.pointer:before, .pointer:after {
  content: "";
  position: absolute;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 37.5px 0 37.5px 40px;
  border-color: transparent transparent transparent rgba(0, 123, 255, 0.7);
}
.pointer:after {  
  bottom: 0;
}
.pointer:before {
  top: 0;
}
<div class="container">
  <div class="pointer"></div>
</div>

Link to Updated JSFiddle

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

Develop an exclusive "click-once" button for a webpage

Can anyone assist me in creating a "one-time clickable" button to launch my website? I've searched through numerous threads on Stack Overflow but haven't found a solution yet. ...

javascripthtmlcssbuttondom-events

Issue with HTML: The heading is not aligned on the same line as the logo

My goal was to create a website dedicated to Manchester United merchandise. I started by inserting the logo and adjusting everything accordingly, but I encountered an issue where the heading and line I inserted were not aligned properly. Here is the proble ...

html

adjusting the size and positioning of an image within a parent div using React

Hey everyone, I'm a newcomer to the world of React. Currently, I'm working on a website and everything seems to be falling into place nicely. However, I've encountered a little hiccup. My goal is to write code within my SCSS folder that will ...

cssreactjsnext.js

Exploring the possibilities of applying CSS to customize the color of various elements

Is there a way to set the color of elements in CSS so that it applies to everything such as fonts, borders, and horizontal rules when applied to the body? How can I accomplish this effectively? ...

htmlcsscolors

What is the best way to clear the content of a contenteditable element in React?

I have a scenario where I am rendering an array of items, each with a contenteditable field. MainComponent.js import { useState } from "react"; import Item from "./Item"; import "./styles.css"; export default function MainC ...

javascripthtmlreactjs

Utilizing JSON and Javascript to dynamically generate and populate interactive tables

Here's how I've structured my JSON data to define a table: var arrTable = [{"table": "tblConfig", "def": [{"column": "Property", "type": "TEXT NOT NULL"}, {"column": "Value", "type": "TEXT NOT NULL"}], "data": [{"Property ...

javascriptdatabasejsonhtml

Looking for assistance with troubleshooting my isotope.js [code written in jquery and html]?

Explore this JSFiddle link I'm attempting to create sortable fancybox images, similar to the filtering functionality seen on this website. I previously achieved this with v1 of isotope but have been struggling with v2. After countless attempts and ad ...

javascriptjqueryhtmlpluginsjquery-isotope

AngularStrap's bs-modal is failing to display content

I have a question, here is a Plunker with the code: http://plnkr.co/edit/SNFy2XcOBefUavG1QCqD?p=preview <button class="btn btn-default" data-template="customer.tpl.html" bs-modal="modal">New Customer </button> < ...

javascripthtmlangularjsangular-strap

An autocomplete CSS editor with Firebug-like features

Looking for a CSS (or HTML) editor that offers code autocompletion similar to Firebug's features. I believe it's referred to as "autocomplete as you type." Thank you! Edit: I came across a tool called Zen Coding that provides shortcuts for cod ...

htmlcss

Dropdown selection returning the text value instead of the designated value

Is it possible to retrieve the text "Region 1" instead of just the value '1' from a dropdown menu in PHP? <select name = 'region' id = 'region'> <option value = '1'>Region 1</option> <select&g ...

javascriptphphtml

CSS: The addition selection operator is not functioning as expected

The span's background color is not changing correctly when the radio button is changed. Why is this happening and how can it be fixed? div { margin: 0 0 0.75em 0; } .formgroup input[type="radio"] { display: none; } input[type="radio"], label { ...

htmlcss

Dispatch keystrokes to a designated text field if they are not taken in by any other input

Is there a way to achieve the functionality seen in apps like Discord, where users can type into the message box even when it's not in focus? I am interested in implementing this feature only if no other input field on the page is currently focused. ...

javascripthtmlreactjs

What is the best way to generate a tilted slant with text positioned next to it?

.image { min-height: 100vh; } .bg-image { background-image: url('https://picsum.photos/1440/900'); background-size: cover; background-position: center; } <!--About Us --> <div class="container-fluid"> <div class="row no- ...

htmlcsstwitter-bootstrapuser-interface

Having issues with Bootstrap 4's bg-inverse not displaying correctly?

While attempting to replicate the navbar example from Bootstrap's documentation, I encountered an issue where the background color of the navbar was not loading properly. <nav class="navbar navbar-inverse bg-inverse"> <a class="navbar-br ...

cssbootstrap-4

How can I use CSS to ensure that both cards and images are equal in size?

I am currently utilizing react, with Material-ui being used for the Cards. For the layout, I have implemented CSS Grid Layout for the Grid system. Presently, the structure looks like this: https://i.stack.imgur.com/0FDyY.png However, my desired outcome i ...

javascriptreactjscssmaterial-ui

Angular: Utilizing Nested ng-repeat Alongside groupBy Feature on Initial Page Load or Refresh

With some help, I've made it this far on my project. However, I need to take one more step to achieve my goal. I want to group data based on an attribute that is currently passed through an ng-click action. Is there a way to automatically do this on p ...

javascriptjqueryhtmlangularjs

Top Tip for conditionally rendering a styled component inside or outside a wrapper, depending on the screen width

Can anyone help me with this coding question? I'm currently trying to determine the most efficient way to conditionally place the code inside or outside of the wrapper. However, I am unsure what the best practice for this would be. This process seems ...

javascriptcssreactjsnext.jsstyled-components

React - Material UI Divider not centered

Is the title says - my divider is not centered in the middle of my text. The current result displays a misalignment: However, I am aiming for my divider to be placed in the center like this (refer to red line): It's quite strange because according t ...

htmlcssreactjsmaterial-ui

Creating dynamic dropdowns with Ajax and HTML on the code side

I have developed a script that generates a drop-down menu and updates the .box div with a new color and image. Below is the HTML & Java code: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <div> ...

javascriptjqueryhtmlcss

What could be the reason for the unexpected behavior of position sticky?

I am encountering an issue while trying to figure out why the container__item--special element behaves as a sticky element in this code snippet <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> ...

htmlcsscss-position