Here are two unique CSS-only shapes designed for email signatures

Question

Here are two unique CSS-only shapes designed for email signatures

Instead of spending more time struggling to find a solution, I'm seeking feedback on using CSS-only shapes for email signatures. Do they render well and are they compatible with most email clients?

I created an email signature with an SVG logo and social media icons, only to discover that Outlook and other clients do not display them.

You can view the example here:

The reason I prefer CSS over PNG is to ensure the signature displays seamlessly without requiring users to accept or download attachments.

Considering our logo is simple, I thought utilizing CSS-only code might work effectively?

I attempted using this tool but encountered difficulties:

Should I persevere or is it unlikely to display correctly? If there's potential, do you have any suggestions on how to combine two shapes with different colors?

html css email svg signature

Answer 1

Answer №1

To create a layout with a parent and two child divs, you can set the parent's position to relative and the children's positions to absolute. The children can be anchored to the top right corner of the parent by using the settings below:

.parent {
  position: relative;
  width: 200px;
  height: 200px;
  background: blue;
}

.child1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: white;
}

.child2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 90px;
  height: 90px;
  background: red;
}

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

Another option is to use just two divs, with the second child having a white border on the left and bottom:

.parent {
  position: relative;
  width: 200px;
  height: 200px;
  background: blue;
}

.child {
  position: absolute;
  box-sizing: border-box;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: red;
  border-left: 10px solid #fff;
  border-bottom: 10px solid #fff;
}

<div class="parent">
  <div class="child"></div>
</div>

Answer 2

To create a layout with a parent and two child divs, you can set the parent's position to relative and the children's positions to absolute. The children can be anchored to the top right corner of the parent by using the settings below:

.parent {
  position: relative;
  width: 200px;
  height: 200px;
  background: blue;
}

.child1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: white;
}

.child2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 90px;
  height: 90px;
  background: red;
}

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

Another option is to use just two divs, with the second child having a white border on the left and bottom:

.parent {
  position: relative;
  width: 200px;
  height: 200px;
  background: blue;
}

.child {
  position: absolute;
  box-sizing: border-box;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: red;
  border-left: 10px solid #fff;
  border-bottom: 10px solid #fff;
}

<div class="parent">
  <div class="child"></div>
</div>

Here are two unique CSS-only shapes designed for email signatures

Answer №1

Similar questions

How to access an element inside a div using the eq() method

Steps to modify the background-color of an iFrame using CSS

Selecting CSS Properties with jQuery

Is it feasible to utilize Socket.io and Express in conjunction with templates without the need for routes?

Combine the content from multiple text areas and submit it to another text area

Strange HTML antics

"The issue with the addClass function not properly executing within an if

Is there a way to dynamically toggle the visibility of a floating textarea between on and off?

What is the best way to transition a div from the top to the bottom in mobile view?

Changing a CSS block in IE7 using jQuery

Retrieve the ng-option key in AngularJS

CSS tabs are not functioning properly as hyperlinks

Finding strikeout text within <s> or <del> tags can be identified by closely examining the HTML codes

The hamburger icon on the Bootstrap 4 navbar expands as expected, yet it fails to collapse back when

Tips for delaying the evaluation of an input field

Increasing an ID number automatically using Javascript

Creating Dynamic Videos with PHP and HTML

Troubleshooting Display Problems when Switching Bootstrap Themes in ASP.NET MVC

Hover over me to see the CSS animation translate upwards until it reaches a specific point

I'm having trouble accessing the Github website. Is there anyone who can lend a hand?