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

What is the best way to specifically target and style a component with CSS in a React application?

I'm facing a small issue with the React modals from Bootstrap in my application. In index.html, I include the following: <link rel="stylesheet" href="/assets/css/bootstrap.min.css"> <link rel="stylesheet" href=& ...

javascriptcssreactjstwitter-bootstrap

What could be causing Gulp Autoprefixer to generate unaltered CSS files?

I am currently learning how to utilize Flexbox, and I have encountered an issue with prefixing while using Gulp. The error message that pops up when attempting to use Gulp autoprefixer is as follows: [19:21:22] Starting 'styles'... [19:21:22] Th ...

cssflexboxgulpautoprefixer

Obtain the form value upon submission without the need to reload the page

I am facing an issue where I have a form and I want to trigger the display of a div (in the same page) and execute a JavaScript function upon clicking submit, all without causing a page refresh. <form action="#" method="post" name= "form1" id = "form ...

javascriptphphtmlajax

What steps can I take to prompt this function to modify the value of my input?

After recently delving into the world of JavaScript, I decided to create a background color generator that randomly changes when a button is clicked. This simple project involves two input fields (color1 & color2) which receive random values upon clicking ...

javascripthtmlcss

Guide on creating my inaugural HTML embeddable widget?

A client recently requested me to create a JavaScript (MooTools)/HTML/CSS/PHP based game as a deployable widget. This will be my first time developing a widget, so I am seeking advice and insights to help me navigate any potential challenges from experie ...

phpjavascripthtmlcsswidget

Can integer values be stored in localStorage similar to JavaScript objects and retrieved without requiring typecasting?

After setting an integer value to a localStorage item: localStorage.setItem('a', 1) and checking its data type: typeof(localStorage.a) "string" it shows as a string. I then typecast it to an int for my purposes: parseInt(localStorage.a) My ...

javascripthtmllocal-storage

The speed of the Ionic app is disappointingly sluggish on devices, causing significant delays

After testing my app in Ionic Lab, it runs smoothly. However, when I create the apk file and install it on my device, the performance is very slow. There are delays in clicking on buttons, pushing pages, opening modals, and closing modals. It seems like t ...

androidhtmlangularionic-frameworkionic2

Using SCSS to target a sibling class when hovering over an element with CSS

Is there a way to alter styles of a sibling element on hover using only CSS? I attempted something similar but was unsuccessful. HTML: <ul> <li class="item active">name1</li> <li class="item">name2</li> <li clas ...

htmlcsssasssiblings

Grid Refresh Spinner Update

Our Vaadin Grid features a settings icon that when clicked, opens a window allowing users to select/deselect columns. Upon closing this window (triggering our custom window event), the main window's columns are updated accordingly. Now, my requirement ...

cssvaadin

"Enhance your browsing experience with Chrome by automatically changing the background when

I am currently using Chrome with a CSS3 background. <h4 class="title-name clearfix"><a href="****************">Fairy Tail - LUCY</a> </h4> My issue is that when I hover my mouse over the title, the ba ...

htmlcss

Looking to switch up the hide/show toggle animation?

Currently, I have a functioning element with the following code. It involves an object named #obj1 that remains hidden upon page load but becomes visible when #obj2 is clicked. #obj1{ position:fixed; width:100px; bottom:180px; right:10 ...

javascriptjquerycss

execute the code when the device is not an iPad

if ( (navigator.userAgent.indexOf('/iPadi') != -1) ) { } This conditional statement is used to identify whether the user's device is an iPad, but I specifically want to execute the code only if it is not an iPad. I have a JQuery hover func ...

jqueryhtmlipaduser-agent

navigation menu 'selective emphasis' feature

I have created a JQuery script that will highlight the 'About', 'My Projects', or 'Contact Me' text on the navigation bar when the corresponding section of the page is in view. To achieve this, I am using a scroll() event list ...

javascriptjquerycsstwitter-bootstrap

Inject an HTML or jade webpage into a div within another HTML or jade webpage

I'm facing an issue in my Node.js project with a script (JS) that is responsible for loading a Jade page into a div of another Jade page using $("#div").load(directory). Despite specifying the directory of the jade page to be loaded, I keep getting an ...

javascripthtmlnode.jsexpresspug

"Changing background color, incorporating hover effects, utilizing !important, and manipulating .css properties with

Encountered a dilemma. I devised a "tabs" feature illustrated in the following demo: http://jsfiddle.net/4FLCe/ The original intention was for the tab to change color to A when hovered over, and to color B when clicked on. However, as shown in the demo, ...

javascriptjquerycss

Arranging various s:select dropdowns for inline display styling

I have a form with three consecutive struts2 tags. Upon rendering the page, the s:select tag is automatically converted to the HTML code at the bottom. The issue arises when I attempt to style the form in order to display these dropdowns horizontally. Unf ...

htmlcssstruts2

What is the best way to eliminate the log of the Internet Explorer web driver?

Currently utilizing watir-webdriver in conjunction with Ruby on Windows 7 to test various pages. Upon initiating Internet Explorer using watir-webdriver, the following logs are generated: Started InternetExplorerDriver server (32-bit) 2.32.3.0 Listening o ...

rubyinternet-explorerhtmlwatir-webdriver

Removing Inline Styles Using jQuery Scroll Event

Whenever I reach the scroll position of 1400 and then scroll back to the top, my chat elements (chat1, chat2, chat3, chat4) receive an "empty" inline style but only for a duration of 1 second. After that, the fadeIn effect occurs again every time I scroll ...

jquerycss

Creating a CSS full-width navigation menu

Recently, I came across a menu code on the web that seemed great. However, I wanted to make my menu responsive and full width. Since I am new to CSS and HTML, adjusting the menu code has been a bit of a challenge for me. .menu, .menu ul { list-style: ...

javascripthtmlcss

The html() method is not functioning correctly in ajax requests

I would like to implement a feature where users can like and unlike a book. However, I am facing an issue where the code only executes once without refreshing the page. JAVASCRIPT <script type="text/javascript"> $(document).ready(function() { ...

phphtmlajax