将切换面板附加到圆形图片右侧的最佳方法是什么？

Question

HTML代码：

<div class="container container-fluid">
            <div class="picture">
              <img class="img-circle img-responsive" src="http://a5.files.biography.com/image/upload/c_fill,cs_srgb,dpr_1.0,g_face,h_300,q_80,w_300/MTE5NTU2MzE2NjUyOTk2MTA3.jpg" class="art">
            </div><!--end of picture-->

          <div id="flip">
            <h3>Click to slide the panel right</h3>
          </div>

            <div class="title">
              <p class="lead">I'm a <a class="link" target='_blank' href='http://www.freecodecamp.com/map'>self taught</a> web designer, developer, co-founder and entrepreneur based in Finland.
                <br> I'm currently part of a small web development
                <br> team in an upcoming start-up, building web and
                <br> mobile applications.
                <br>My passion is to use technology based
                <br> solutions, to help solve real world challenges.
                <br> Competences:
                <br> Languages and Frameworks:
                <br> Javascript, HTML5, CSS3, jQuery, Bootstrap3,
                <br> Angular.js, Meteor.js.
                <br> Tools & expertise:
                <br> Git, Responsive Web Design, Agile
                <br> Methodologies.</p>
            </div>

  </div><!--end of container-->

CSS代码：

#flip>h3{
  border: 2px solid black;
 display:inline;
  
}
#flip{
position:absolute;
  transform:rotate(-90deg);
}

.title>p{
 border:2px solid green;
  background-color:#e5eecc;
}

问题出现在 "about" 页面上。我想要做的是将显示 "click to slide the panel right" 的切换面板附加到图片的右侧。但是图片是圆形的，所以我不确定最好的方法是什么。

请记住，我在做这些事情方面仍然是新手。

此外，jquery 事件使切换面板的内容在网页加载时隐藏，我做的对吗？

谢谢

Answer 1

你觉得这个技术怎么样？ http://codepen.io/wilman/pen/BjgRNo

它基于 CSS Shapes，只需要在 h3 (shapy)

中添加一个新元素

#flip > h3 {
  border: 2px solid black;
  border-left-color: transparent; /* hides the left border */
  height: 270px;
  width: 210px;
  padding-right: 7px;
  padding-top: 30px;
  padding-bottom: 30px;
  border-radius: 0 50% 50% 0; /* Apply radius only on top-right and bottom-right corners */
  line-height: 1.4; /* this spaces the words a bit */
  margin-left: 140px;
  background: rgba(128, 128, 128, 0.39);
}

#flip {
  position: absolute;
  margin-top: -290px;
  overflow: hidden;
  z-index: 0;  /* modify this value if you don't want this behind the image */
}

.shapy {
  float: left; /* float is required for shapes to work correctly */
  width: 280px;
  height: 270px;
  margin-left: -140px;
  margin-top: -30px;
  shape-outside: circle(68% at 7px 104px); /* this gives a round shape to the text */
}

/* Also some changes in the .picture element are neccesary */
.picture{        
  padding-top:150px;
  /* Made the picture container more compact to not interfere with the jquery click action */
  width: 270px;
  position: relative;
  z-index: 1;
}

<div id="flip">
  <h3>
    <!-- Apply a shape-outside property to this element -->
    <div class="shapy"></div>
    
    Click to slide the panel right
  </h3>
</div>

将切换面板附加到圆形图片右侧的最佳方法是什么？

what is the best way to attach a toggle panel to right side of rounded picture?

css

jquery

border

slidetoggle