Transforming a pseudo element from horizontal to vertical orientation

I have a unique snippet of code that generates an element at the bottom of a div to serve as an inventive 'arrow/pointer' pointing down.

Now, I am seeking assistance in tweaking the script so that the 'arrow/pointer' directs towards the left side instead.

Here is the current code:

HTML

<div style="background-image:url('...');">
    <div class="mask"></div>
</div>

The CSS for the mask can be found on the following fiddle:

https://jsfiddle.net/hunt0194/gu1sgotd/

I have attempted adjusting values like 'bottom' to 'left', but unfortunately, I haven't been successful in making it work as desired.

This particular piece of code produces two black shapes that act as a form of masking at the base of the div.

javascriptjqueryhtmlcsspseudo-element

Answer №1

Check out this awesome tool called css-triangle-generator. It makes creating your own triangle css super easy compared to what you're currently doing.

Try using:

border-width: 100px 100px 100px 0;
border-color: transparent red transparent transparent;

This code will give you the desired triangle effect. Feel free to experiment on the page and customize it until it's perfect!

Answer №2

body {
  margin-right: 50px;
  margin-left: 50px;
}
.arrow_box {
  position: relative;
  background: #FF0000;
  border: 4px solid #FF0000;
  height:150px;
}
.arrow_box:after,
.arrow_box:before {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.arrow_box:after {
  border-color: rgba(255, 0, 0, 0);
  border-right-color: #FF0000;
  border-width: 30px;
  margin-top: -30px;
}
.arrow_box:before {
  border-color: rgba(255, 0, 0, 0);
  border-right-color: #FF0000;
  border-width: 36px;
  margin-top: -36px;
}
<div class="preview">
  <div class="arrow_box">

  </div>
</div>

Generated via CSS ARROW PLEASE!

Answer №3

Consider including within .indx-img

transform:rotate(90deg);

inside .mask

left: 10%;


.indx-img {
  position: relative;
  padding: 16% 0;
  background-color: red;
  transform: rotate(90deg);
}
.mask:before {
  border-left: 0 none;
  border-right: 20px solid transparent;
  left: 0;
}
.mask:after {
  border-left: 20px solid transparent;
  border-right: 0 none;
  right: 0;
}
.mask:before,
.mask:after {
  border-bottom: 20px solid #fff;
  content: " ";
  display: block;
  height: 0;
  position: absolute;
  top: 0;
  width: 50%;
  box-sizing: border-box;
}
.mask {
  bottom: 0px;
  height: 20px;
  left: 10%;
  position: absolute;
  width: 100%;
  z-index: 1000;
}
<div class="indx-img">
  <div class="mask"></div>
</div>

Try this out on jsfiddle https://jsfiddle.net/gu1sgotd/4/

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 delete the text following the last "/" in location.href with the help of

I need to extract #step_4#step_4#step_4 from the local project URL The link is https://localhost/test-project/#step_4#step_4#step_4, and I aim to achieve this using window.location.href. This is the code snippet I have implemented: var url_id = window.lo ...

htmljquerywordpress

Tips for concatenating elements to a previous state array when using an arrow function within the setState method?

When I drag and drop images to React-Dropzone library, I want to append them to the previous file state. const [files, setFiles] = useState([]) ... const { getRootProps, getInputProps, isFocused, isDragAccept, is ...

javascriptreactjsreact-dropzone

Insert a line break within curly braces in JSX

When I write code like this: { factors.map((factor) => ( <li>{factor}</li> )) } Prettier formats it like this: {factors.map((factor) => ( <li>{factor}</li> ))} Does anyone know what rule I should ad ...

javascriptreactjsjsxprettierprettier-vscode

Unable to find the import "@mui/x-charts/PieChart" in the file "src/components/Pie/Pie.jsx". Could the file be missing or spelled incorrectly?

I utilized the PieChart component in my pie.jsx file pie.jsx import { PieChart } from '@mui/x-charts/PieChart'; const Pie = () => { return ( <div> <PieChart series={[ { data: [ ...

javascriptreactjsinstallationmaterial-uipie-chart

Is there a way to adjust the positioning of the center item in owl carousel 2 after applying a scale transformation of 2.0, without it getting cropped vertically?

I am having an issue with using Bootstrap card and owl carousel 2. When I apply transform: scale(2.0) to the center item, it becomes vertically cropped instead of staying centered. It overflows in the owl-stage section. Is there a way to fix this problem? ...

htmljquerycssowl-carouselbootstrap-5

Having trouble setting margin-bottom to 0 in react and antd - why won't it reset?

While practicing with React, I added <link rel="stylesheet" href="%PUBLIC_URL%/css/reset.css" /> to the head of index.html in order to reset the styles. However, I noticed that <h1> still had a margin-bottom:0.5em that I c ...

htmlcssreactjsfrontendantd

Insert text within the switch component using Material-UI

Looking to customize Material UI's Switch component with text inside? Check out the image below for an idea of what I'm going for. https://i.stack.imgur.com/KadRZ.png Take a look at my code snippet: import React from 'react'; import S ...

javascripthtmlreactjsmaterial-ui

What is the best way to deliver an HTML document in Express from a directory that is one level higher than my server folder?

I am facing an issue while trying to access an HTML file from my main directory through my Express server, which is located one level deeper in the server folder. Below is the configuration of my server code: const express = require('express') ...

javascriptexpressserverfilepath

Move the element from the center of the screen back to its starting position

Looking to craft a single animation that will transition elements from the center of the current view back to their original positions. Unfortunately, CSS animations do not support toggling the display property. This limitation causes the second rectangle ...

htmlcss

What methods can I use to visually distinguish external links from those on my website?

Can CSS be used to show users which links are external? ...

css

FullCalendar jQuery caught in an endless loop

After successfully implementing drag and drop deletion, I encountered a new issue. Whenever I delete an event, the removal process functions properly but then the code gets stuck in a loop within the eventDragStop function causing the calendar to freeze ...

javascriptjqueryjquery-uifullcalendar

Guide to creating a new window without a menu bar for an onclick function in electronJS

After trying to remove the menu bar from the main window using win.setMenu(null) in the main.js file, I encountered a new issue. When opening a new window (referred to as the "add items window"), I struggled to find a way to hide the menu bar in it as well ...

javascriptwindowselectron

Capture the item selected from the dropdown using ng-model to retrieve the name instead of the

I need help getting the name/text/html of the selected option in a dropdown using angular.js, rather than just its value. Currently, I have this setup which retrieves the value: Here is my HTML code snippet <select class="SelectCar" ng-model="Selected ...

javascripthtmlangularjs

Troubleshooting Unresponsive Dropdown Menu Using JQuery

My attempt to integrate the Dropdown Menu feature into my Navbar using base.html and navbar.html files has hit a snag. Although the menu is visible, it remains non-responsive upon clicking. Despite my efforts to rectify the issue by referencing other resou ...

htmljquerybootstrap-4

The JQuery mmenu breaks free from its constraints within a Bootstrap 4 design

Whenever I zoom in on my page or view it in responsinator.com, particularly in landscape view, the menu fails to collapse into the mobile version. I have implemented the jquery mmenu plugin alongside bootstrap 4 justified nav. After attempting to remove ...

jqueryhtmlcssbootstrap-4mmenu

Utilize a jQuery button to horizontally align text with ellipsis

I am currently struggling to align some text with ellipsis horizontally alongside a jquery button and I cannot seem to determine the reason for this issue. You can view my problem on jsfiddle: http://jsfiddle.net/5bVDu/ <span> <span id=&apo ...

jqueryhtmlcssjquery-uivertical-alignment

Display a confirmation dialog using AngularConfirm after a function in AngularJS has finished executing

Trying to figure out how to update the $ngConfirm box after a function is done. When submit is clicked, a spinning cog appears: https://i.sstatic.net/lxwrH.png $scope.inProgress = function(){ $ngConfirm({ theme: 'modern', i ...

javascriptjqueryangularjsnode.js

Embed the Three.js CSS3DRenderer scene within a designated div element

I am interested in using the Three.js CSS3DRenderer to create a three-dimensional composition. Here is the code I have: "use strict"; var OrbitControls = THREE.OrbitControls, CSS3DRenderer = THREE.CSS3DRenderer, CSS3DObject = THREE.CSS3DObject, S ...

javascriptthree.js

Sending a collection of items to a web API endpoint

Hey there, I'm having an issue with posting a list of objects to a web API method using the following code snippet: var uri = "http://localhost:" + port + "/api/Account"; $.ajax({ dateType: "json", method: "POST", url: uri, da ...

jquerypostasp.net-web-api

Executing program through Socket.io alert

My NodeJS server sends notifications to clients when certain actions are performed, such as deleting a row from a grid. Socket.io broadcasts this information to all connected clients. In the example of deleting a row, one approach could be adding an `acti ...

javascriptnode.jsangularjssocket.ioeval