Asked  6 Months ago    Answers:  5   Viewed   21 times

I'd like to have a div that looks like this:

border example

Is this possible to do with HTML + CSS? I will also be animating this div with jQuery. When the div is hidden I would like the title and the top line to show.

 Answers

60

You can do something like this, where you set a negative margin on the h1 (or whatever header you are using)

div{
    height:100px;
    width:100px;
    border:2px solid black;
}

h1{
    width:30px;
    margin-top:-10px;
    margin-left:5px;
    background:white;
}

Note: you need to set a background as well as a width on the h1

Example: http://jsfiddle.net/ZgEMM/


EDIT

To make it work with hiding the div, you could use some jQuery like this

$('a').click(function(){
    var a = $('h1').detach();
    $('div').hide();
    $(a).prependTo('body');    
});

(You will need to modify...)

Example #2: http://jsfiddle.net/ZgEMM/4/

Tuesday, June 1, 2021
 
Giovanni
answered 6 Months ago
34

Yes, it is possible - see this:

demo

.circle {
  position: relative;
  margin: 7em auto;
  width: 16em;
  height: 16em;
  border-radius: 50%;
  background: lightblue;
}

.arc {
  overflow: hidden;
  position: absolute;
  /* make sure top & left values are - the width of the border */
  /* the bottom right corner is the centre of the parent circle */
  top: -1em;
  right: 50%;
  bottom: 50%;
  left: -1em;
  /* the transform origin is the bottom right corner */
  transform-origin: 100% 100%;
  /* rotate by any angle */
  /* the skew angle is 90deg - the angle you want for the arc */
  transform: rotate(45deg) skewX(30deg);
}

.arc:before {
  box-sizing: border-box;
  display: block;
  border: solid 1em navy;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  transform: skewX(-30deg);
  content: '';
}
<div class='circle'>
  <div class='arc'></div>
</div>
Thursday, June 3, 2021
 
SubniC
answered 6 Months ago
98

This is a tough one. There is no way of styling this specific control. Even if you force a different appearance under webkit you still get the damn resize handle:

http://jsfiddle.net/qw73n/

You can, however, work around it and place a background image in the bottom left corner:

http://jsfiddle.net/q5kdr/

But the handler will still appear on top of it.

I'm afraid the only alternative is using jQuery UI resizable:

http://jqueryui.com/demos/resizable/

Thursday, August 5, 2021
 
Usman Khan
answered 4 Months ago
31

fieldset {
    font-family: sans-serif;
    border: 5px solid #1F497D;
    background: #ddd;
    border-radius: 5px;
    padding: 15px;
}

fieldset legend {
    background: #1F497D;
    color: #fff;
    padding: 5px 10px ;
    font-size: 32px;
    border-radius: 5px;
    box-shadow: 0 0 0 5px #ddd;
    margin-left: 20px;
}
<section style="margin: 10px;">
<fieldset style="min-height:100px;">
<legend><b> My Statistics </b> </legend>
<label> <br/> </label>
<label> <br/> </label>
</fieldset>

(http://jsfiddle.net/ESkRt/1/)

Wednesday, September 15, 2021
 
edA-qa mort-ora-y
answered 3 Months ago
35

To quote another post:

There are some outstanding bugs in WebKit to do with it clipping content in concert with border-radius, like this one or this one specifically about the video element.

If you apply the border-radius to an element that wraps around the video, and adds a -webkit-mask-image, then it can be done in Chrome. Here's a demo that masks a transparent png and clips the corners of the video:

Demo (transparent background): http://jsfiddle.net/pe3QS/24/

Update: I changed the HTML/CSS to only use one wrapping element, and it works on (at least) IE9+, FF and Chrome.


CSS:

div.outer {
    float: left;
    height: 240px;
}
div.outer video {
    width: 320px;
    height: 100%;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
    border-radius: 32px 0 32px 0;
}

HTML:

<div class="outer">
    <video src="http://www.w3schools.com/html/movie.ogg" type="video/ogg" controls></video>
</div>
Monday, November 15, 2021
 
Jonathan Taylor
answered 2 Weeks ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share