Add a touch of mystery to a triangle SVG with CSS shadows

Is there a way to apply shadows to SVG images, like a triangle? I've tried using polyfill solutions but they didn't give me the desired effect. Check out this JSFiddle where I showcase what I'm trying to achieve.

This is my HTML:

<div class="spikes"></div>

And here's my CSS:

body {
  background-color: #ccc;
}
.spikes {
    margin-top: 20px;
    width: 250px;
    transform: rotate(180deg);
    background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGFhZ18xIiBkYXRhLW5hbWU9IkxhYWcgMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjUgMjUiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogIC    AgICAuY2xzLTEgew0KICAgICAgICBmaWxsOiAjZmZmZmZmOw0KICAgICAgfQ0KICAgIDwvc3R5bGU+DQog    IDwvZGVmcz4NCiAgPHRpdGxlPmthcnRlbDwvdGl0bGU+DQogIDxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIyNSAxOS43IDI1IDI1IDAgMjUgMCAyMC4yNSAxMi43NyA3LjQ3IDI1IDE5LjciLz4NCjwvc3ZnPg0K");
    height: 20px;
    position: absolute;
    max-width: 1000px;
    transition: 0.75s;
    -webkit-box-shadow: -2px -2px 5px 0px rgba(97,97,97,1);
    -moz-box-shadow: -2px -2px 5px 0px rgba(97,97,97,1);
    box-shadow: -2px -2px 5px 0px rgba(97,97,97,1);
}
javascripthtmlcss

Answer №1

Applying a shadow to a background-image is not possible because it's a CSS property, not an element.

Instead of applying the shadow to the background-image, you can use the filter:drop-shadow property on the actual element.

If the SVG image contains transparency or alpha channels, the result will resemble this:

body {
  background-color: #ccc;
}
.spikes {
  margin-top: 20px;
  width: 250px;
  transform: rotate(180deg);
  background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGFhZ18xIiBkYXRhLW5hbWU9IkxhYWcgMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjUgMjUiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogICAgICAuY2xzLTEgew0KICAgICAgICBmaWxsOiAjZmZmZmZmOw0KICAgICAgfQ0KICAgIDwvc3R5bGU+DQogIDwvZGVmcz4NCiAgPHRpdGxlPmthcnRlbDwvdGl0bGU+DQogIDxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIyNSAxOS43IDI1IDI1IDAgMjUgMCAyMC4yNSAxMi43NyA3LjQ3IDI1IDE5LjciLz4NCjwvc3ZnPg0K");
  height: 20px;
  position: absolute;
  max-width: 1000px;
  transition: 0.75s;
  filter: drop-shadow(-1px -1px 1px black);
}
<div class="spikes"></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

AngularJS is incapable of detaching forms from objects

Creating forms dynamically using ng-repeat and adding them to the vm.forms object is causing issues. When an item is removed from the array, the corresponding form is deleted but the key in the vm.forms object remains, leading to undefined errors. angul ...

javascriptangularjsforms

How to refresh an array in Angular 4 after inserting a new element using splice method?

I have a Angular list displayed in a table, and I need to insert an element at a specific position. I have tried using the following code: array.splice(index, 0, element); While everything seems fine in the console with the element being added at the corr ...

javascripthtmlangulartypescript

I am facing an issue where the text on my website is failing to display properly

I am facing an issue where the text on my website renders normally on Android or Windows, but when I run it on iOS, the text disappears completely. It's as if all the text has been set to display: none; The other elements seem to be tucking in just fi ...

htmlcssiostext

Find the name of the class using JavaScript

Is there a more elegant way to retrieve the class name of a class in JavaScript? I have implemented a method and would like to log any errors with a message indicating the class in which the error occurred. My current solution feels a bit "dirty": I am s ...

javascriptclassoop

Mongoose Filtering in Rest API: A Comprehensive Guide

Currently, I am utilizing Express to construct an API. Within this API, my objective is to retrieve a list of customers from MongoDB by using Mongoose. The code snippet below showcases the route I have set up (please disregard any paging and limit concerns ...

javascriptnode.jsmongodbexpress

When styled with an id, the DIV element does not inherit styles from a CSS class

I seem to be facing an issue with the code below, possibly due to using both class and id in the same div. Despite knowing they are meant to work together. For more information: Can I use DIV class and ID together in CSS? .PB { position: relative; ...

htmlcssclass

Tips for seamlessly integrating full-size images into the slider?

I'm a beginner when it comes to CSS and I am having trouble fitting two images inside my first slider. My goal is to display the full images within the slider, but the width of the images exceeds that of the slider. Below is the CSS code for the slid ...

htmlcss

Using Bootstrap 4 causes text to wrap buttons onto a separate line

I am facing an issue with my HTML page that displays correctly on medium and large devices but encounters difficulties on smaller screens. When the screen size decreases, the text inside the grey elements takes up all the space, causing the two right-float ...

htmlcssbootstrap-4

Next.js is able to generate a unique URL that strictly handles code execution without any visual elements

Currently, I am in the process of developing a new website using NextJS. One issue that has come up involves a password reset verification endpoint. After a user initiates a password reset, it is sent to the API for processing and then redirected back to ...

javascriptreactjsnext.js

In my opinion, CSS3 transform translateZ can be likened to scaling in some way

There are instances where I believe that the translateZ and scale properties produce similar effects, akin to zooming in or out. I suspect there is a mathematical relationship between them. If I know the value of one, such as translateZ(-1000px), along wi ...

htmlcsstransformscale

Remove feature in HTML file upload form

I have a basic upload form set up like this: <form method="post" action="" enctype="multipart/form-data"> <table border="0"> <tr> <td>Select XML file to upload ...

javascripthtml

Cursor hovers over button, positioned perfectly in the center

I am facing a challenge with implementing a hover function for a set of buttons on the screen. The goal is to display the mouse pointer at the center of the button upon hovering, rather than the actual position of the cursor being displayed. I have tried u ...

javascriptjquerycsspointerlock

Tips for utilizing a .node file efficiently

While attempting to install node_mouse, I noticed that in my node modules folder there was a .node file extension instead of the usual .js file. How can I execute node_mouse with this file format? After some research, it seems like node_mouse may be an a ...

javascriptnode.jsnpmnode-gyp

What is the most efficient way to use the $slice operator on a highly nested array in mongoose

I am currently working on slicing a deeply nested array. To illustrate, consider the following structure. I aim to slice this array for pagination purposes. {messages: [{ message: { members: [ {example: object, blah: blah}, {example2: object2, blah2: blah ...

javascriptnode.jsmongodbexpressmongoose

Experiencing a lack of information in express?

Whenever I attempt to send a POST request (using fetch) with the body containing the state of the application, I receive an empty object on the server side. What am I doing wrong here? I should be receiving the object with the properties name, username, an ...

javascriptnode.jsreactjsexpress

No files found in dist/ directory when using Vue.js

Beginner's Note I must confess that I am a novice when it comes to web development. Please bear with me if this question seems silly; I appreciate your assistance in advance. Initial Setup My current node version is 16.15.1 and npm version is 9.5.0 ...

javascriptvue.jsnpmvite

What is the best way to ensure that my multiple choice code in CSS & JS only allows for the selection of one option at a time? Currently, I am able

I'm currently facing a small issue that I believe has a simple solution. My knowledge of Javascript is limited, but I am eager to improve my skills in coding for more visually appealing websites. My problem lies in the code snippet below, where I am ...

javascripthtmlcss

JavaScript-based tool for extracting content from Sketch file

My goal is to extract the contents of a .sketch file. I have a file named myfile.sketch. When I rename the file extension to myfile.zip and extract it in Finder, I can see the files inside. However, when I try the same process on the server using Node.js ...

javascriptnode.jsunzipjszip

Setting the color for the :hover and :active states on a react JSX component: A step-by-step guide

<button onClick={fetchExchangeRates} style={{ backgroundColor: `${selectedColor}` }} className="hover text-white px-3 py-1 flex justify-center items-center gap-2 text- rounded-md" > Convert <FontAwesomeIcon className=&apo ...

cssreactjsdynamictailwind-css

Implementing three identical dropdown menus using jQuery and HTML on a single webpage

It seems like I've tangled myself up in a web of confusion. I'm trying to have three identical dropdowns on a single page, each displaying clocks from different cities (so users can view multiple clocks simultaneously). However, whenever I update ...

javascriptjqueryhtml