Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- .helper-object {
- position:fixed;
- padding: 5px;
- display : flex;
- flex-direction: row;
- border-radius: 5px;
- background: #fff;
- border: 1px solid #fff;
- box-shadow: 0px 5px 15px 5px #888888;
- }
- .helper-object.BOTTOM, .helper-object.TOP {
- transform: translateX(-50%);
- }
- .helper-object.LEFT {
- transform: translate( -100%, -50%);
- }
- .helper-object.RIGHT {
- transform: translate(100%, -50%);
- }
- .helper-object:after {
- content: '';
- position: absolute;
- width: 0;
- height: 0;
- border: 10px solid transparent;
- }
- .helper-object.BOTTOM:after{
- left: 50%;
- top: 0;
- border-bottom-color: #fff;
- border-top: 0;
- margin-left: -10px;
- margin-top: -10px;
- }
- .helper-object.TOP:after {
- bottom: 0;
- left: 50%;
- border-top-color: #fff;
- border-bottom: 0;
- margin-left: -10px;
- margin-bottom: -10px;
- }
- .helper-object.LEFT:after {
- right: 0;
- top: 50%;
- border-left-color: #fff;
- border-right: 0;
- margin-top: -10px;
- margin-right: -10px;
- }
- .helper-object.RIGHT:after {
- left: 0;
- top: 50%;
- border-right-color: #fff;
- border-left: 0;
- margin-top: -10px;
- margin-left: -10px;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement