Looking to create a unique shape within an HTML div?
By utilizing custom CSS in an HTML table, I can design a layout where one column features a rounded avatar while the other displays a rectangular box. However, I am struggling to make the circle overlap the rectangle as shown in the image above. Any helpful hints would be greatly appreciated.
You have the option to utilize a :pseudo-element for accomplishing this task.
div {
position: relative;
width: 300px;
height: 75px;
background: #B0B4FF;
margin: 25px 0;
}
div:after {
position: absolute;
content: '';
width: 125px;
height: 125px;
border-radius: 50%;
background: url(http://www.lorempixel.com/125/125);
top: -25px;
right: -25px;
}<div></div>If you want to modify the background-image using JavaScript, you can follow these steps.
The provided JavaScript code will iterate through the stylesheet rules, locate the rule for #info:after, and update its backgroundImage property as specified.
var stylesheet = document.styleSheets;
for (i = 0; i < stylesheet.length; i++) {
var rules = stylesheet[i];
for (j = 0; j < rules.cssRules.length; j++) {
var rule = rules.cssRules[j];
if (rule.selectorText == "#info:after" || rule.selectorText == "#info::after") {
rule.style.backgroundImage = 'url(http://dummyimage.com/125/125/0f8d94/0011ff&text=newImage)'
}
}
}#info {
position: relative;
width: 300px;
height: 75px;
background: #B0B4FF;
margin: 25px 0;
}
#info:after {
position: absolute;
content: '';
width: 125px;
height: 125px;
border-radius: 50%;
background: url(http://www.lorempixel.com/125/125);
top: -25px;
right: -25px;
}<div id="info"></div>As CSS cannot directly change the background-image, an img tag must be used. Since :pseudo-elements do not apply to img tags, an additional div will be required for the rectangle.
.container {
position: relative;
width: 325px;
}
.info {
width: 300px;
height: 75px;
background: #B0B4FF;
margin: 25px 0;
text-align: center;
line-height: 75px;
}
img {
position: absolute;
top: -25px;
right: -25px;
width: 125px;
height: 125px;
border-radius: 50%;
background: url(http://www.lorempixel.com/125/125);
}<div class="container">
<div class="info">Info Text</div>
<img src="http://lorempixel.com/125/125" />
</div>To achieve the title, A Real Key Shape:
#container {
width: 325px;
}<div id="container">
<svg viewBox="-2 -2 206 103">
<defs>
<clipPath id="circ">
<rect id="rect" x="1" y="1" width="98" height="98" rx="100" />
</clipPath>
</defs>
<path d="M0,50 a50,50 0 0,1 96.9846,-17.101 m-96.9846,17.101 a50,50 0 0,0 96.9846,17.101 l10,10 q5,3 6,-3 v-12.5 h12.5 l7,7 l10,-12 l10,12 h7 l10,-12 l7,7 h8 l16,-15.5 q5,0 -16,-10 h-71.5 v-12.5 q0,-6 -6,-3 l-10,10" stroke-linecap="round" stroke="saddlebrown"
stroke-width="2" fill="tan" />
<path d="M100,51 h97 l-1.5,2 h-85z" stroke="saddlebrown" stroke-width="1" fill="none" />
<text x="110" y="48" font-size="6">Info Text</text>
<image clip-path="url(#circ)" width="98" height="98" x="1" y="1" style=" width: 100px; height: 100px; border-radius: 50%;" xlink:href="http://dummyimage.com/150x150/a77243/000000&text=Real Key Shape" />
</svg>
</div>I'm currently in the process of constructing a website using React, and I have a specific challenge related to the "news" section. Within this section, I have a list of three components that represent different news items. These components are housed ...
I've been attempting to implement functionality with bootstrap 4 cards, but I'm running into issues where the card size expands based on the length of the text. Below is my code: <div class="row row-container"> <div class=& ...
I am encountering an issue with my IntersectionObserver that is observing an img. It works perfectly when the root is set to null (viewport). However, as soon as I change the root element to another img, the observer fails to detect the intersection betwee ...
I am working on passing a JavaScript variable across all pages in my project. The goal is to calculate the total value from various pages and display it at the end of navigation. Below is an example of my JS code: <script> $(document).ready ...
Greetings, it appears I am encountering an issue with my website. When I refer to "Get Started," it displays as "GetStarted." However, when I insert a space between "Get" and "started," it separates onto two lines as "Get" on the first line and "started" o ...
I am facing a challenge with my dashtable which contains over 5000 records and is paginated to load faster. However, I have noticed that when I set the page size to 5000, the loading speed decreases significantly. I have implemented a function that retriev ...
I am facing a challenge with positioning an H2 element and a Dropdown button on the same line using bootstrap 4 flex. Here is what I have: https://i.sstatic.net/kV45k.png This is what I am trying to achieve: https://i.sstatic.net/Owt5j.png Below is my ...
The header element is contained within a div. I have positioned the header as fixed, leading to 2 issues: The width of the header extends beyond the width of the div container. It should align with the div. When the header is fixed, the other elements li ...
So, I've been working on a website using Wordpress and created some custom page templates. However, I recently discovered that the sidebar on this specific page doesn't show up in IE 7. This page is using the lawyer.php template. I'm not su ...
Seeking assistance with setting up redirects. Below are snippets of the code. index.js const router = createBrowserRouter([ { //Defining App as the root element... path: "/", loader: () => { }, element: <App/>, ...
Currently, I'm working on a website that features a subtle dark grey menu at the top of every page. The menu is built using HTML and CSS with a list structure. To highlight the corresponding menu item based on the current page, I am utilizing the ID a ...
I've created a wrapper div with a text div and an image div floating to the right. It should have been a simple task, but for some reason I can't seem to get it to work tonight. I'm completely stuck. Take a look at how it appears currently: ...
As a novice in HTML and jQuery, I am currently working on creating a portfolio site for a school project. One of the challenges I have encountered is designing a graphic that includes a text box within a resizable div element. My goal is to prevent excessi ...
Seeking advice on how to extract rules and property/values from a .css file or <style></style>. I am not in need of an elaborate parser, as the validity of selector text, property name, or value is not important. My main focus is ensuring that ...
It is common knowledge that Angular functions as a SPA (Single Page Application). I am seeking the most effective approach to display a main left-side menu selector page, where clicking on any menu item will load the content in the right-side view div. Th ...
Looking to create a translucent foreground color on a webpage? I'm aiming to give a hint of red to the overall look of the website. Edit: Just to clarify, I am not referring to changing font colors. I want a color that can overlay the entire page wit ...
Utilizing the amazing Bootstrap-select jQuery plugin has brought two unexpected default styles to my selectboxes. Despite inserting the necessary CSS and JS files into my website, all select boxes are displaying with these peculiar default settings (withou ...
Two divs have been created with background images, both displaying the same image but in different colors - one grey and the other green. These images are waveforms. Initially, only the grey image (div1) is visible while the green image (div2) remains hid ...
I've been working on implementing a video background for my website. I came up with a custom code to embed URL links from Youtube and Vimeo using "oEmbed". The process is functioning well, but I'm facing some challenges in setting the background ...
My experience with Bootstrap 4 on certain pages has been quite challenging, specifically when it comes to aligning fields with labels to the left and maintaining an aligned appearance for input fields. Here is the snippet of my code: <div class="wrap ...