Just to play around, I wanted to achieve the following input box look with pure CSS 3. Also to teach myself how box-shadow works.

I think I got pretty close.

jsFiddle example

To add arrows for any boxes in CSS3 is relatively easy. You may use the border, absolute position along with the :before pseudo selector to add arrows in any directions.

To make a triangle with CSS border:

border: 20px solid transparent; /* box width for your triangle */
border-right-color: #fff; /* color for your triangle, the direct is opposite of what you want. For example, if you want a left pointing arrow, then set the right border color. */

More on CSS3 shapes

To position the arrow, make sure the box container is positioned relative so the arrow may be absolutely positioned based on the box container

.box {
	position: relative;
}
.box:before {
	content: ' ';
	height: 0;
	position: absolute;
	width: 0;

	/* your arrow and the positioning css here */
}

View jsFiddle Live Demo

You can generate the arrows using this tool.

I spent some time to understand how border-image works in CSS3. It does take a bit of visualization to wrap your head around it. On top of that, they really look different in different browsers depend on the browsers’ rendering engine. This is the best tutorial I found on this topic.

I came up with three borders in the new theme I’m working on for wordpress. You can take a look and see whether your browser supports it. (Or you can run your browser against the CSS3 test.)

See examples in jsFiddle

Tender Spring post thumbnail technique

So one of the things I put into my new theme Tender Spring is the post thumbnail support. The theme handles the image that you set as post Featured Image on the post in a special way. It puts a circle around it and adds a leave. I’m sure it’s not a new concept but heck I thought of it while designing the theme so I want to share my new revelation!

the_post_thumbnail() doesn’t really give the flexibility I need because I don’t want the img tag but rather just the url for the post thumbnail file.

So here’s my template code:

/**
 * Custom post thumbnail (featured image)
 */
function tenderSpring_post_image_html( $html, $post_id, $post_image_id ) {

	$html = '<div class="tenderSpring-post-thumbnail" style="background: url(' . wp_get_attachment_url( get_post_thumbnail_id($post_id) ) . ') no-repeat center center;background-size: 200px"><div class="tenderSpring-post-thumbnail-inner">' . $html . '</div></div>';

	return $html;
}
add_filter( 'post_thumbnail_html', 'tenderSpring_post_image_html', 10, 3);

I wrapped two layers over the img.

My css looks like:

.tenderSpring-post-thumbnail {
	width: 100px;
	height: 100px;
	border-radius: 50px;
	float: left;
	margin: 20px 20px 0 0;
}
.tenderSpring-post-thumbnail-inner {
	background: url("images/postThumbnail.png") no-repeat right top;
	width: 100px;
	height: 100px;

}
img.wp-post-image {
	display: none;
}

I made the img not display but used the background image from the first layer with border-radius to get the circle affect. The inner layer is used to overlay a background image on top of the outer layer.

This image is the leaf you see.

This technique depends on the CSS3 background-size & border-radius which should now be supported by your latest versions of FF, Chrome and even IE believe it or not.